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

Vue.js创建会话条件逻辑表单–vue-flow-form
插件名称 vue-flow-form
版本号 v2.0.1
发布时间 2020年9月9日
插件作者 ditdot-dev

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

安装和下载:

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

变更日志:

v2.0.1(05/27/2021)

  • 修复通过 npm 添加包时的问题

v2.0.0 (05/27/2021)

  • 现在支持 Vue 3
  • NumberType 现在可用于蒙版
  • 为 Text 和 LongText 添加了 maxLength 选项
  • 为数字类型问题添加了最小/最大验证
  • 各种错误修正和改进

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问题