| vue, surveyjs

【vue】整合surveyjs工具生成在线问卷或考试

本想做个问卷系统，在github上找到一个叫做surveyjs的项目，正好是我需要的东西。

官网

https://surveyjs.io/

vue项目,surveyjseditor例子

surveyjs_vue_quickstart

可以只用单个survey页面或者把编辑器导入也行。

这里我的是问卷生成，所以俩部分都需要使用

开始

本地找个空文件夹
打开gitbash命令行窗口
git clone https://github.com/surveyjs/surveyjs_vue_quickstart.git
项目克隆下来后
直接运行肯定不行
显然根目录下少了nodejs的node_modules
在该目录下打开命令行窗口
运行

npm install

（可能需要翻墙）

装好对应的依赖和库
就可以

npm run dev

运行了

打开项目目录

直接打开上面的components组件目录，里面SurveyEditor.vue是我们引用需要写的组件代码。

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

<script>
import * as SurveyEditor from 'surveyjs-editor'
import 'surveyjs-editor/surveyeditor.css';

import * as SurveyKo from "survey-knockout";
import * as widgets from "surveyjs-widgets";

import "inputmask/dist/inputmask/phone-codes/phone.js";

widgets.icheck(SurveyKo);
widgets.select2(SurveyKo);
widgets.inputmask(SurveyKo);
widgets.jquerybarrating(SurveyKo);
widgets.jqueryuidatepicker(SurveyKo);
widgets.nouislider(SurveyKo);
widgets.select2tagbox(SurveyKo);
widgets.signaturepad(SurveyKo);
widgets.sortablejs(SurveyKo);
widgets.ckeditor(SurveyKo);
widgets.autocomplete(SurveyKo);
widgets.bootstrapslider(SurveyKo);

export default {
  name: 'survey-editor',
  data () {
    return {
    }
  },
  mounted () {
    let editorOptions = { showEmbededSurveyTab: true };
    this.editor = new SurveyEditor.SurveyEditor('surveyEditorContainer', editorOptions);
    this.editor.saveSurveyFunc = function() {
      console.log(JSON.stringify(this.text));
    };
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

大部分代码都很容易理解，showEmbededSurveyTab是用来选择是否显示应用在不同项目中需要写的代码的子页面，我改为false

如何把该组件引入自己的项目中–

新建项目

按上次vue总体结构学习这节配置好vue项目结构之后。
把该加入的SurveyEditor.vue放入component目录

把该vue里用到的比如surveyjs-editor、survey-konckout、surveyjs-widgets、phone一一用

npm install xxxx -D

安装好

然后在页面里需要使用到该组件时只需要

如上导入即可

另外，生成的页面导入，该页面创建完问卷后点击save survey会产生一个关于该问卷的格式信息，在saveSurveyFunc方法里我们可以对该数据进行处理提交给数据库。

当获取到该数据后要对新的问卷页面进行渲染，则可以这样：

新建页面

<template>
    <div id="surveyContainer">

<!-- <link href="https://surveyjs.azureedge.net/1.0.66/survey.css" type="text/css" rel="stylesheet" /> -->
        <survey :survey="survey"></survey>
    </div>
</template>

<script type="text/javascript">
import * as Survey from 'survey-vue'
import 'bootstrap/dist/css/bootstrap.css';

Survey.Survey.cssType = "bootstrap";

var surveyJSON = {"pages":[{"name":"page1","elements":[{"type":"comment","name":"question1","title":"aaa"},{"type":"dropdown","name":"question2","choices":["item1","item2","item3"]}]},{"name":"page2","elements":[{"type":"radiogroup","name":"question3","choices":["item1","item2","item3"]}]},{"name":"page3","elements":[{"type":"matrix","name":"question4","columns":["Column 1","Column 2","Column 3"],"rows":["Row 1","Row 2"]}]}],"maxTimeToFinishPage":10,"showTimerPanel":"top"}

var mysurvey = new Survey.Model(surveyJSON);


export default{
    data(){
        return{
            survey:mysurvey
        }
    },
    methods:{
          sendDataToServer:function(survey){
            alert("The results are:" + JSON.stringify(survey.data));
        }
    },
    created(){
        mysurvey.onComplete.add(this.sendDataToServer);
    }

}
</script>

（这里要用安装bootstrap和survey-vue）
这样就能渲染出对应的问卷或考试页面（考试可以设置提交限定时间），上面的surveyJSON是我现导入的数据，一般使用要从服务器获取。

关于created和mounted的区别
created是在页面创建的时候，mounted是页面渲染结束后，上面的created应做修改
参考

https://www.jianshu.com/p/f99d3e3d2256

ESC