插件名称 | vue-flow-form |
---|---|
版本号 | v1.1.7 |
发布时间 | 2020年9月9日 |
插件作者 | ditdot-dev |
一个Vue.js组件,用于为表单向导,调查表,测验等创建对话,条件逻辑,多步骤表单。
v1.1.7(03/03/2021)
v1.1.6(2020年12月19日)
v1.1.4(11/17/2020)
v1.1.3(10/09/2020)
v1.1.2(09/24/2020)
v1.1.1(09/19/2020)
v1.1.0(09/10/2020)
# 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