问卷调查设计-SurveyJS的使用（创建）前言 SurveyJS提供了四个模块创建自己的问卷调查，本文及下文都会以调查

前言

SurveyJS提供了四个模块创建自己的问卷调查，本文及下文都会以调查创建者（Survey Creator）板块为例分享一下个人使用Vue3在开发中的步骤及过程，这里强调一下，写这篇文章的目的是因为在使用SurveyJS过程中发现官方文档设计体验太差，很多方法、属性、api不太好找，很多可定制的功能没有详细说明，没有案例示范，希望自己在开发使用的过程中遇到的问题方法能为大家提供有效的帮助，没有介绍到的方法属性等，还请大家多多包涵，可前往官网自行查看或邮件联系SurveyJS开发人员寻求帮助（回复及时，态度友好）。

注意：Survey Creator不可免费用于商业用途。如果你想把它集成到你的应用程序中，你必须购买商业许可证。但是，您可以使用此页面上的 Survey Creator 来生成 JSON 调查配置，并在您的应用程序中免费将它们与 SurveyJS 一起使用。

为什么选择SurveyJS？

从项目的角度和需求出发，首先我的项目中有问卷调查相关的需求，其次我希望这个功能是集成在系统中的，不需要每次用到其他网站的定制开发实现我的功能，同时可以满足基本的定制需求。

而 SurveyJS 官方称其为 “主流 Saa 调查平台和昂贵的定制解决方案的免费开源替代品” ，仅仅一句话就完美契合项目需求，果断选择

来自官方的解释：

创建Survey Creator

1. 安装`survey-creator-knockout`npm 包

npm install survey-creator-knockout --save

2. 配置样式

<script setup>
import "survey-core/defaultV2.min.css"; // Survey Creator 只能使用 Default V2 主题
import "survey-creator-core/survey-creator-core.min.css";
</script>

3. 配置 Survey Creator

在配置对象中指定需要配置的属性，属性参考

const creatorOptions = {
 showLogicTab: true,
 isAutoSave: true
};

将配置对象传递给SurveyCreator构造函数，如下面的代码所示，以实例化 Survey Creator。将生成的实例分配给一个常量，稍后将用于渲染组件：

<script setup>
import { onMounted } from 'vue'
import { SurveyCreator } from "survey-creator-knockout";
// ...

const creatorOptions = {
 showLogicTab: true,
 isAutoSave: true
};
   
onMounted(() => {
 const creator = new SurveyCreator(creatorOptions);
})

完整代码：

<template>
  <div id="surveyCreator" />
</template>

<script setup>
import { onMounted } from 'vue'
import { SurveyCreator } from "survey-creator-knockout";
import "survey-core/defaultV2.min.css";
import "survey-creator-core/survey-creator-core.min.css";

const creatorOptions = {
  showLogicTab: true,
  isAutoSave: true
};

onMounted(() => {
  const creator = new SurveyCreator(creatorOptions);
})
</script>
<style scoped>
#surveyCreator {
  height: 100vh;
  width: 100vw;
}
</style>

4. 保存和加载调查所创建的数据

保存

Survey Creator 将所创建的调查整体生成为 JSON 对象。你可以将这些对象保存在您的服务器上。保存 JSON 对象，需要调用saveSurveyFunc函数。它接受两个参数：

saveNo
当前更改的增量数。
callback
一个回调函数。saveNo调用它并作为第一个参数传递。将第二个参数设置为true或false基于服务器是应用还是拒绝更改。

creator.saveSurveyFunc = (saveNo, callback) => {
      // 如果使用localStorage:
      window.localStorage.setItem("survey-json", creator.text);
      callback(saveNo, true);

      // 如果使用服务器存储，这里调用接口即可
      saveSurveyJson(
          "https://your-web-service.com/",
          creator.JSON,
          saveNo,
          callback
      );
    };
    creator.render("surveyCreator");

加载

将所创建的调查 JSON 加载到 Survey Creator。

creator.text = window.localStorage.getItem("survey-json") || JSON.stringify(defaultJson);

完成上述步骤，你会看到这样的一个创建问卷面板

通篇英文，使用起来很不友好，接下来要做的就是如何实现本地化Survey Creator。

问卷调查设计-SurveyJS的使用（创建）

前言