README
vFormBuilder-dddxxxlll
简介
一个基于Vuejs的表单生成器
在线演示地址
https://dddxxxlll.github.io/vFormBuilder/
Installation
npm i -S vformbuilder-dddxxxlll
For Vue.js 2.0
import in main.js
import Vue from 'vue'
import vformbuilder from 'vformbuilder-dddxxxlll'
require('../node_modules/vformbuilder-dddxxxlll/lib/vformbuilder.css')
Vue.use(vformbuilder)
Use vformbuilder component:
<vformbuilder @updateFormData="updateFormData" @switchQuestion="switchQuestion" @addOption="addOption" @delOption="delOption" @delQuestion="delQuestion" @selectQuestion="selectQuestion" :editMode="editMode" :formData="formData" class="formBuilder"></vformbuilder>
JSON schema
[
{
queType: "Radio",
question: "这是一个单选题",
queOnly: 0,
queSeq: 0,
value: 0,
inputValue: "",//填空的值
des: "",// 描述
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
arrange:1,// 选项排列
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
options: [
{
des: "选项1",
hasInput: false,
value: 1
},
{
des: "选项2",
hasInput: true,
value: 2
}
]
},
{
queType: "Checkbox",
question: "这是一个多选题",
queOnly: 1,
queSeq: 1,
value: [],
inputValue: [],
des: "",
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
arrange:1,// 选项排列
minWr: "",
maxWr: ""
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
options: [
{
des: "选项1",
hasInput: false,
value: 1
},
{
des: "选项2",
hasInput: true,
value: 2
}
]
},
{
queType: "Select",
question: "这是一个下拉选择",
queOnly: 2,
queSeq: 2,
value: "",
des: "",// 描述
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
arrange:1,// 选项排列
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
options: [
{
des: "选项1",
value: 1
},
{
des: "选项2",
value: 2
}
]
},
{
queType: "DatePicker",
question: "这是一个日期选择",
queOnly: 3,
queSeq: 3,
value: 0,
des: "",// 描述
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
},
isShow: {
queOnly: 1,
value: 1,
check: false,
}, // 必要题目序号数组
},
{
queType: "RadioTable",
question: "这是一个矩阵选择",
queOnly: 4,
queSeq: 4,
des: "",// 描述
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
selectType: "Radio",
minWr: "",
maxWr: ""
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
// value: 0,
options: {
column: [{name:"选项1",value:1},{name:"选项2",value:2}],
row: [{name:"行1",value:[]},{name:"行2",value:[]}],
}
},
{
queType: "Input",
question: "这是一个填空题",
queOnly: 5,
queSeq: 5,
value: "",
des: "",
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
fillType: "Number",
minWr: 0,
maxWr: 10
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
},
{
queType: "MultiInput",
question: "这是一个多项选择题",
queOnly: 6,
queSeq: 6,
value: "",
des: "",
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
},
isShow: {
queOnly: "",
value: "",
check: "",
}, // 必要题目序号数组
options: [
{
des: "填空1",
value: "",
fillType: "Number", // 输入框type:Number,ZH,EN,None
minWr: "",
maxWr: ""
},
{
des: "填空2",
value: "",
fillType: "None", // 输入框type:Number,ZH,EN,None
minWr: "",
maxWr: ""
}
]
},
{
queType: "InputTable",
question: "这是一个矩阵填空",
queOnly: 7,
queSeq: 7,
des: "",// 描述
queLimit: {
required: false,//必选
score: 0,// 分值
weight: 0,// 权重
},
isShow: {
queOnly: "",
value: "",
check: true,
}, // 必要题目序号数组
options: {
column: [{name:"选项1",value:1},{name:"选项2",value:2}],
row: [{name:"行1",value:[]},{name:"行2",value:[]}],//值为数组,有多少列就有多少个值
}
}
]