README
vel-form-builder
基于Vue、ElementUI、Vue.Draggable,并参考了https://github.com/GavinZhuLei/vue-form-making
- 扩展了Element组件
- 以模态框展示
- 内置form-builder和form-renderer两个组件,生成和渲染分工明确
- 使用Element主题色变量,与Element同步主题色
安装
npm i vel-form-builder -S
引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VelFormBuilder from 'vel-form-builder'
import 'vel-form-builder/lib/main.css'
import App from './App.vue';
Vue.use(ElementUI);
Vue.use(VelFormBuilder);
new Vue({
el: '#app',
render: h => h(App)
});
自定义主题色
在设置Element主题色的 element-variables.scss
文件中,加入vel-form-builder的scss文件
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
@import '~vel-form-builder/src/assets/css/index';
组件
form-builder
form-builder
的主要功能是根据用户配置的表单,生成一个包含了配置信息的对象 configData
,该对象传给 form-renderer
可渲染出表单
基础用法
<form-builder :visible.sync="visible" ref="builder" @save="onSave" :bindData="bindData"></form-builder>
<script>
export default {
data() {
return {
visible: false,
bindData: {
Radio: {
radio1: [{
label: '男'
}, {
label: '女'
}],
radio2: [{
label: '北京'
}, {
label: '上海'
}, {
label: '广州'
}, {
label: '深圳'
}]
},
CheckBox: {
checkbox1: [{
label: '多选框1'
}, {
label: '多选框2'
}]
}
}
}
},
methods: {
onSave(data) {
console.log(data)
}
}
}
</script
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 是否显示 Dialog,支持 .sync 修饰符 | Boolean | false |
data | 使用 configData 初始化以编辑已有的表单 |
Obejct | — |
bindData | 给有选项的组件绑定数据使用 | Obejct | — |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
save | 在配置对话框点击保存时触发 | configData |
Methods
方法名 | 说明 | 参数 |
---|---|---|
getData | 获取 configData |
— |
form-renderer
form-renderer
的功能是根据 configData
渲染出表单
基础用法
<form-renderer :data="configData" ref="renderer" :bindData="bindData"></form-renderer>
<script>
export default {
data() {
return {
configData: {
"buildList": [{
"component": "Input",
"formItemConfig": {
"base": {"label": "输入框"},
"extra": {"configRules": {"required": false, "min": "", "max": "", "reg": ""}, "failedMessage": ""}
},
"config": {
"placeholder": "",
"valueType": "string",
"textTip": "",
"name": "Input_20190110_nWu2J50k"
}
}],
"formConfig": {"base": {"label-width": 80}, "extra": {"cols": 1}}
},
bindData: {
Radio: {
radio1: [{
label: '男'
}, {
label: '女'
}],
radio2: [{
label: '北京'
}, {
label: '上海'
}, {
label: '广州'
}, {
label: '深圳'
}]
},
CheckBox: {
checkbox1: [{
label: '多选框1'
}, {
label: '多选框2'
}]
}
}
}
}
}
</script
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | configData 生成表单 |
Obejct | — |
bindData | 给有选项的组件绑定数据使用 | Obejct | — |
Methods
方法名 | 说明 | 参数 |
---|---|---|
validate | 对表单进行校验,间接调用了ElementUI Form组件的validate | Function(callback: Function(boolean, object)) |
getFormData | 获取表单内容 formData 对象,键值关系为name—value |
— |