Vue.js创建会话条件逻辑表单–vue-flow-form

Vue.js创建会话条件逻辑表单–vue-flow-form

插件名称:vue-flow-form

发布时间:2020年9月9日

插件作者:ditdot-dev

官网 演示 GitHub下载

一个Vue.js组件,用于为表单向导,调查表,测验等创建对话,条件逻辑,多步骤表单。

变更日志:

v1.1.0(09/10/2020)

  • 允许在移动设备上使用多行LongTextType
  • 在移动设备的LongTextType上不显示“按Enter”文本
  • 添加两个新主题
  • 修复SectionBreak问题

安装和下载:

# Yarn
$ yarn add @ditdot-dev/vue-flow-form

# NPM
$ npm i @ditdot-dev/vue-flow-form --save

基本用法:

1.导入流程图组件。

从’@ ditdot-dev / vue-flow-form’导入FlowForm,{QuestionModel,QuestionType,ChoiceOption,LanguageModel}

2.添加带有问题列表的FlowForm组件作为问题道具。

<template>
  <flow-form v-bind:questions="questions" v-bind:language="language" />
</template>

3.在问题数组中定义问题

export default {
  name: 'example',
  components: {
    FlowForm
  },
  data() {
    return {
      language: new LanguageModel({
        // 您的语言定义(可选)。
        // 如果您想使用缺省定义,可以忽略此道具。
      }),
      questions: [
        // QuestioModel数组
        new QuestionModel({
          question: 'Question',
          type: QuestionType.MultipleChoice,
          options: [
            new ChoiceOption({
              label: 'Answer'
            })
          ]
        })
      ]
    }
  }
}
相关插件