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

变更日志：

v1.1.7（03/03/2021）

• 允许将问题定义为组件
• 新问题类型– MultiplePictureChoice
• 各种错误修正
• 小改进

v1.1.6（2020年12月19日）

• 修复“跳过”按钮在某些情况下不显示的问题

v1.1.4（11/17/2020）

• 新的全局功能–计时器
• 新问题类型–日期
• 其他导航选项
• 其他MultipleChoiceType选项
• 其他组件事件

v1.1.3（10/09/2020）

• 孤立的CSS样式
• 新的布局选项

v1.1.2（09/24/2020）

• 下拉菜单可访问性增强
• 主题/设计更正
• 修正了一些小错误

v1.1.1（09/19/2020）

• 允许对所有扩展TextType的问题类型使用掩码
• 现在可以在说明下方添加链接
• 现在可以禁用进度条
• 添加了新主题
• 辅助功能改进

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'
            })
          ]
        })
      ]
    }
  }
}

---

官网：https://github.com/ditdot-dev/vue-flow-form

演示：https://www.vue365.cn/code_demo.php?id=2110

GitHub下载：https://github.com/ditdot-dev/vue-flow-form/archive/master.zip