<template> <div> <ElRow> <ElCol :span="12"> <h3>FormData (sync)</h3> <v-jsoneditor v-model="json" :options="{mode:'code',onBlur:syncFormData,mainMenuBar:false,statusBar:false}" :plus="false" height="300px"/> </ElCol> <ElCol :span="11" :push="1"> <h3>FormOption (sync)</h3> <v-jsoneditor v-model="optionJson" :options="{mode:'code',onBlur:syncFormOption,mainMenuBar:false,statusBar:false}" :plus="false" height="300px"/> </ElCol> </ElRow> <ElRow> <h3>Api</h3> <ElRow> <ElButton @click="getOption">获取表单配置(option)</ElButton> <ElButton @click="getFormData">获取表单值(formData)</ElButton> <ElButton @click="fields">获取表单字段(fields)</ElButton> </ElRow> <br/> <ElRow> <ElButton @click="append">添加规则(append)</ElButton> <ElButton @click="prepend">添加规则(prepend)</ElButton> <ElButton @click="appendChild">添加规则(appendChild)</ElButton> <ElButton @click="removeField">删除字段(removeField)</ElButton> <ElButton @click="getRule">获取规则(getRule)</ElButton> </ElRow> <br/> <ElRow> <ElButton @click="hidden">隐藏字段(hidden)</ElButton> <ElButton @click="disabled">禁用字段(disabled)</ElButton> <ElButton @click="resetField">重置字段(resetFields)</ElButton> <ElButton @click="validateField">字段验证(validateField)</ElButton> <ElButton @click="method">执行组件方法(exec)</ElButton> <ElButton @click="setValue">设置组件值(setValue)</ElButton> <ElButton @click="getValue">获取组件值(getValue)</ElButton> </ElRow> <br/> <ElRow> <ElButton @click="submitBtnProps">设置提交按钮(submitBtnProps)</ElButton> <ElButton @click="resetBtnProps">设置重置按钮(resetBtnProps)</ElButton> <ElButton @click="inline">行内模式(updateOptions)</ElButton> </ElRow> <br/> <ElRow> <ElButton @click="disabled2">禁用表单(disabled)</ElButton> <ElButton @click="submit">提交表单(submit)</ElButton> <ElButton @click="hideForm">隐藏表单(hideForm)</ElButton> <ElButton @click="validate">表单验证(validate)</ElButton> <ElButton @click="resetFields">重置表单(resetFields)</ElButton> <ElButton @click="clearValidateState">清空验证(clearValidateState)</ElButton> </ElRow> <br/> <ElRow> <ElButton @click="refresh">刷新(refresh)</ElButton> <ElButton @click="reload">重载(reload)</ElButton> <ElButton @click="destroy">销毁表单(destroy)</ElButton> </ElRow> <br/> <ElButton @click="jsonCreate">使用Json生成</ElButton> <ElButton @click="create">默认生成</ElButton> <ElButton @click="createJson" style="color:#ff7271;">获取 json 字符串生成规则(toJson)</ElButton> </ElRow> <ElRow> <h3>Render</h3> <form-create :rule="rule" v-model="fapi" :option="option" :value.sync="formData" @prefix-change="change"/> </ElRow> </div> </template> <script> const mock = window.formCreateMock; const jsonMock = window.formCreateJsonMock; export default { name: "example", data(){ return { fapi:{}, rule:mock(), formData:{}, json:{}, option:{resetBtn: false}, optionJson:{} } }, methods: methods(), beforeMount(){ this.$watch(()=>this.formData, value => { this.json = value; }); }, mounted() { this.optionJson = {...this.fapi.options}; } } function methods() { const create = function () { this.rule = mock(); } const jsonCreate = function () { this.rule = jsonMock(); } const createJson = function () { const json = this.fapi.toJson(); console.log(json); alert(json); }; let uni = 1; //sync const syncFormData = function () { if (JSON.stringify(this.json) !== JSON.stringify(this.formData)) { this.formData = {...this.json} } } const syncFormOption = function () { this.option = {...this.optionJson}; } //api const append = function () { this.fapi.append({ type: 'input', field: 'rule' + uni, title: 'rule' + uni, }, 'goods_name'); uni++; } const prepend = function () { this.fapi.prepend({ type: 'input', field: 'rule' + uni, title: 'rule' + uni, }, 'goods_name') uni++; } const appendChild = function () { this.fapi.append({ type: 'button', children: ['按钮插槽'], slot: 'append', }, 'goods_name', true) } const removeField = function () { this.fapi.removeField('address') } const getRule = function () { alert(JSON.stringify(this.fapi.getRule('goods_name'))); } const destroy = function () { this.fapi.destroy() } const fields = function () { alert(JSON.stringify(this.fapi.fields())); } const getOption = function () { alert(JSON.stringify(this.fapi.options)); } const getFormData = function () { alert(JSON.stringify(this.fapi.form)); } const reload = function () { this.fapi.reload(); } let hiddenFlag = false; const hidden = function () { hiddenFlag = !hiddenFlag; this.fapi.hidden(hiddenFlag, 'goods_name'); } let disabledFlag = false; const disabled = function () { disabledFlag = !disabledFlag; this.fapi.disabled(disabledFlag, 'goods_name'); } let disabledFlag2 = false; const disabled2 = function () { disabledFlag2 = !disabledFlag2; this.fapi.disabled(disabledFlag2); } let submitFlag = false; const submitBtnProps = function () { submitFlag = !submitFlag; this.fapi.submitBtnProps({loading: submitFlag}) this.optionJson = {...this.fapi.options} } let resetFlag = false; const resetBtnProps = function () { resetFlag = !resetFlag; this.fapi.resetBtnProps({loading: resetFlag}) this.optionJson = {...this.fapi.options} } let inlineFlag = false; const inline = function () { inlineFlag = !inlineFlag; this.fapi.updateOptions({form: {inline: inlineFlag}}) this.optionJson = {...this.fapi.options} } const refresh = function () { this.fapi.refresh(); } let hideFlag = false; const hideForm = function () { hideFlag = !hideFlag; this.fapi.hideForm(hideFlag); } const validate = function () { this.fapi.validate(); } const validateField = function () { this.fapi.validateField('goods_name'); } const resetFields = function () { this.fapi.resetFields(); } const resetField = function () { this.fapi.resetFields(['goods_name']); } const submit = function () { this.fapi.submit(() => alert('success')); } const clearValidateState = function () { this.fapi.clearValidateState(); } const method = function () { this.fapi.exec('goods_name', 'focus'); } const setValue = function () { this.fapi.setValue('goods_name', this.fapi.form.goods_name + '1'); } const getValue = function () { alert(JSON.stringify(this.fapi.getValue('goods_name'))); } return { create, jsonCreate, createJson, syncFormData, syncFormOption, change() { console.log(arguments); }, append, reload, prepend, appendChild, getFormData, getOption, removeField, getRule, destroy, fields, hidden, disabled, disabled2, submitBtnProps, resetBtnProps, inline, refresh, hideForm, validate, validateField, resetFields, resetField, submit, clearValidateState, method, getValue, setValue, } } </script> 

---

功能演示中用到了以下数据

mock()

import {maker} from '@form-create/element-ui' import Vue from 'vue' export default function mock() { return [ //hidden 组件 maker.hidden('id', '14'), maker.create('testSlot', 'testSlot', 'testSlotTitle').children([ maker.input('', 'asd').slot('asd').display(false), maker.input('', 'asd23').slot('asd'), ]), //cascader 多级联动组件 maker.cascader({title: '所在区域', style: 'color:red'}, 'address', ['陕西省', '西安市']).props({ options: [] }).effect({ address: '1' }).info({ info: '12312313123', }).wrap({ required: true }).prefix({ type: 'button', children: ['prefix'] }).suffix({ type: 'button', children: ['suffix'] }), // input 输入框组件 maker.input('商品名称', 'goods_name', 'iphone').props({ placeholder: '请输入商品名称', clearable: true, disabled: false, maxlength: 10, prefixIcon: 'el-icon-info' }).setProp('prefix', 'prefix').setProp('suffix', 'suffix').validate([ {required: true, message: '请输入商品名称', trigger: 'blur'} ]).control([ { value: 'append', child: true, rule: [maker.create('template').children(['append']).slot('append').setProp('suffix', { type: 'span', children: ['asdf'] })] }, { value: 'prepend', child: true, rule: [maker.create('template').children(['prepend']).slot('prepend')] }, ]).on({ input(v) { console.log(v); } }).emit(['change']).className('goods-name').children([ maker.create('template').children(['append']).slot('append') ]) .info('请输入商品名称!!!!!'), //autoComplete 自动选择组件 maker.auto('自动完成', 'auto', 'xaboy').props({ fetchSuggestions: function (queryString, cb) { cb([ {value: queryString}, {value: queryString + queryString} ]); } }).emitPrefix('xaboy').emit(['change']).link(['goods_info']).update((val, rule, fApi) => { console.log(val); return fApi.getValue('goods_info') === 'goods_info'; }), //textarea 组件 maker.textarea('商品简介', 'goods_info', '').props({ autosize: {minRows: 4, maxRows: 8}, placeholder: '请输入商品名称' }).update((val, rule, api) => { console.log('change'); return 'val' === api.getValue('auto'); }).link(['auto']).wrap({ show: true }), { type: 'object', title: '对象组件', field: 'object', value: {date: '2121-12-12', field: 10, field2: '123123123'}, props: { rule: [ { type: 'col', wrap: {show: true}, children: [ maker.date('date', 'date', '').native(false).col({span: 12}), { type: 'inputNumber', field: 'field', title: 'field', props: { disabled: false }, validate: [ {required: true, min: 10, type: 'number'} ], col: { span: 12 } } ] }, { type: 'input', field: 'field2', title: 'field2', props: { disabled: false }, validate: [ {required: true} ] } ] } }, { type: 'group', title: '批量添加', field: 'group', value: [{date: '2121-12-12', field: 10, field2: '123123123'}], suffix: 'suffixsuffix', props: { // field: 'field', expand: 3, rules: [ { type: 'col', wrap: {show: true}, children: [ { type: 'DatePicker', field: 'date', title: 'date', native: false, col: {span: 12} }, { type: 'inputNumber', field: 'field', title: 'field', props: { disabled: false }, validate: [ {required: true, min: 10, type: 'number'} ], col: { span: 12 } } ] }, { type: 'input', field: 'field2', title: 'field2', props: { disabled: false }, validate: [ {required: true} ] } ] }, validate: [ {required: true, min: 3, type: 'array', message: '最少增加3项', trigger: 'change'}, ] }, //radio 单选框组件 maker.radio('是否包邮(control)', 'is_postage', 1).options([ {value: 0, label: '不包邮', disabled: false}, {value: 1, label: '包邮', disabled: false}, {value: 2, label: '未知', disabled: true}, ]).col({span: 8}).control([ { value: 1, prepend: 'is_postage', rule: [ maker.number('满额包邮1', 'postage_money1', 0).effect({ open: '1' }).control([ { value: 0, prepend: 'rate', rule: [ maker.number('满额包邮2', 'postage_money2', 0) ] } ]) ] }, { value: 0, prepend: 'goods_info', rule: [ maker.number('满额包邮3', 'postage_money3', 0).control([ { value: 0, prepend: 'goods_name', rule: [ maker.number('满额包邮4', 'postage_money4', 0) ] } ]) ] } ]), //checkbox 复选框付选择 maker.checkbox('标签', 'label', [1]).options([ {value: 1, label: '好用', disabled: true}, {value: 2, label: '方便', disabled: false}, {value: 3, label: '实用', disabled: false}, {value: 4, label: '有效', disabled: false}, ]).col({span: 8}).children([ { type: 'el-checkbox', children: ['asdf'], slot: 'default' } ]), //switch 开关组件 maker.switch('是否上架', 'is_show', '1').props({ 'activeValue': '1', 'inactiveValue': '0', 'slot': { open: '上架', close: '下架', } }).col({span: 8, labelWidth: '100'}), //自定义组件 maker.createTmp('<el-button @click="onClick" style="width:100%;" :disabled="disabled">{{button}}字符串测试{{test}}-{{num}}</el-button>', function () { return new Vue({ data: function () { return { test: 'createTmp渲染', button: '<i-button />', num: '', } }, props: { disabled: Boolean, value: Number, formCreate: Object }, watch: { value: { handler(n) { this.num = n; }, immediate: true, } }, methods: { onClick: function () { console.log('click'); this.num++; this.$emit('input', this.num); }, } }) }, 'tmp', '自定义 title').prefix('prefixprefixprefix').value(100).props('disabled', false), //自定义组件 maker.create('el-button', 'btn').props('disabled', false).col({span: 12}).children([ maker.create('span').domProps({ innerHTML: '测试自定义按钮' }) ]).emit(['click']).emitPrefix('btn'), //自定义组件 maker.create('el-tooltip', 'tip', '自定义 title').props({ content: '这里是提示文字', }).col({span: 11, push: 1}).children([ maker.create('span').domProps({ innerHTML: '当鼠标经过这段文字时，会显示一个气泡框' }) ]).value(false), //select 下拉选择组件 maker.select('产品分类', 'cate_id', '105').options([ {'value': '104', 'label': '生态蔬菜', 'disabled': false, 'slot': '<div style:\'color:#ff7271;\'>自定义显示内容</div>'}, {'value': '106', 'label': '植物植物', 'disabled': false}, { 'value': '105', 'label': '新鲜水果', 'disabled': false, 'slot': function ($h) { return $h('div', { style: 'color:#ff7271;' }, ['新鲜水果']); } }, ]).props({multiple: true}), { type: 'div', name: 'div2', children: [] }, { type: 'div', name: 'div', children: [ 'asdfasf', { type: 'el-col', props: { span: 12 }, name: 'cal', children: [ //datePicker 日期选择组件 maker.date('活动日期', 'section_day', ['2018-02-20 12:12:12', '2018-03-20 12:12:12']).props({ 'type': 'datetimerange', }), //timePicker 时间选择组件 maker.time('活动时间', 'section_time', ['11:11:11', '22:22:22']).props({ 'isRange': true, 'placeholder': '请选择活动时间' }), ] }, { type: 'el-col', props: { span: 12 }, children: [ //inputNumber 数组输入框组件 maker.number('排序', 'sort', 0).props({ precision: 2 }).col({span: 12}).validate( [{require: true, type: 'number', min: 10}] ), //colorPicker 颜色选择组件 maker.color('颜色', 'color', '#ff7271').props({ 'format': 'hex' }).props({ 'hue': true }).col({span: 12}), ] } ], native: true }, //rate 评分组件 maker.rate('推荐级别', 'rate', 2) .props({ 'max': 10, }) .validate({required: true, type: 'number', min: 3, message: '请大于3颗星', trigger: 'change'}) .col({span: 12}).control([ { handle: function (val) { return val > 5; }, rule: [ maker.input('好评原因', 'goods_reason', '').props({disabled: false}) ] }, { handle: function (val) { return val < 5; }, rule: [ maker.input('差评原因', 'bad_reason', '').props({disabled: false}) ] } ]), //slider 滑块组件 maker.slider('滑块', 'slider', [30, 80]).props({ 'min': 0, 'max': 100, 'range': true, }).col({span: 12}), { type: 'wangEditor', field: 'txt', title: '富文本框', value: '<h1 style="color: #419bf7;">form-create</h1><a href="https://github.com/xaboy/form-create">GitHub</a>' }, //upload 上传组件 maker.upload('轮播图', 'pic', ['http://file.lotkk.com/form-create.jpeg']) .props({ 'action': 'https://mock.uutool.cn/4erua2dig4i0', 'limit': 2, 'uploadType': 'image', 'name': 'file', 'onSuccess': function (res, file) { console.log('upload success'); file.url = res.thumbUrl; }, 'onRemove': function (file, fileList) { console.log(file, fileList); }, 'beforeRemove': function () { console.log('before-remove'); }, 'allowRemove': true, }), //frame 框架组件 maker.frame('素材', 'fodder', ['http://file.lotkk.com/form-create.jpeg']).props({ src: '/iframe.html', maxLength: 0, type: 'image', width: '80%', modalTitle: '预览~~~', okBtnText: 'ok', closeBtnText: 'close', title: 'select' }).validate([ {required: true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'} ]), //tree 树形组件 maker.tree('权限', 'tree', [11, 12]).props({ type: 'checked', multiple: true, showCheckbox: true, emptyText: '暂无数据', defaultExpandAll: true, expandOnClickNode: false, data: [ { title: 'parent 1', expand: true, selected: false, id: 1, children: [ { title: 'parent 1-1', expand: true, id: 2, children: [ { title: 'leaf 1-1-1', disabled: true, id: 11 }, { title: 'leaf 1-1-2', selected: true, id: 12 } ] }, { title: 'parent 1-2', expand: true, id: 3, children: [ { title: 'leaf 1-2-1', checked: true, id: 13, }, { title: 'leaf 1-2-1', id: 14, } ] } ] } ], }).validate([ {required: true, type: 'array', min: 2, message: '至少选择2个', trigger: 'change'} ]) ]; } 

jsonMock()

export default function jsonMock() { //以下是组件的生成规则及参数默认值 return [ //hidden 组件 { type: 'hidden', field: 'id', value: '1' }, //cascader 多级联动组件 { type: 'cascader', title: '所在区域', field: 'address', value: ['陕西省', '西安市', '新城区'], props: { separator: '/', }, effect: { address: 1 } }, //input 输入框组件 { type: 'input', title: '商品名称', field: 'goods_name', value: 'iphone', props: { placeholder: '请输入商品名称', //输入框占位文本 disabled: false, //禁用 }, validate: [ {required: true, message: '请输入商品名称', trigger: 'blur'} ] }, //input 输入框组件 { type: 'input', title: '商品简介', field: 'goods_info', value: '', props: { type: 'textarea', //输入框类型，text，textarea 和其他 原生 input 的 type 值 rows: 10, //输入框行数，只对 type="textarea" 有效 autosize: {minRows: 4, maxRows: 8}, //自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } }, children: ['asd'] }, //autoComplete 自动选择组件 { type: 'autoComplete', title: '自动完成', field: 'auto', value: 'xaboy', props: { fetchSuggestions: function (queryString, cb) { cb([ {value: queryString}, {value: queryString + queryString} ]); }, } }, { type: 'object', title: '对象组件', field: 'object', value: {date: '2121-12-12', field: 10, field2: '123123123'}, props: { rule: [ { type: 'col', wrap: {show: true}, children: [ { type: 'datePicker', field: 'date', title: 'date', col: { span: 12 } }, { type: 'inputNumber', field: 'field', title: 'field', props: { disabled: false }, validate: [ {required: true, min: 10, type: 'number'} ], col: { span: 12 } } ] }, { type: 'input', field: 'field2', title: 'field2', props: { disabled: false }, validate: [ {required: true} ] } ] } }, { type: 'group', title: '批量添加', field: 'group', value: [{date: '2121-12-12', field: 10, field2: '123123123'}], suffix: 'suffixsuffix', props: { // field: 'field', rules: [ { type: 'col', wrap: {show: true}, children: [ { type: 'DatePicker', field: 'date', title: 'date', native: false, col: {span: 12} }, { type: 'inputNumber', field: 'field', title: 'field', props: { disabled: false }, validate: [ {required: true, min: 10, type: 'number'} ], col: { span: 12 } } ] }, { type: 'input', field: 'field2', title: 'field2', props: { disabled: false }, validate: [ {required: true} ] } ] }, validate: [ {required: true, min: 3, type: 'array', message: '最少增加3项', trigger: 'change'}, ] }, // // //radio 单选框组件 { type: 'radio', title: '是否包邮', field: 'is_postage', value: '0', options: [ {value: '0', label: '不包邮', disabled: false}, {value: '1', label: '包邮', disabled: false}, {value: '2', label: '未知', disabled: true}, ], props: { disabled: false, } }, //checkbox 复选框付选择 { type: 'checkbox', title: '标签', field: 'label', value: [ '1', '2', '3' ], options: [ {value: '1', label: '好用', disabled: true}, {value: '2', label: '方便', disabled: false}, {value: '3', label: '实用', disabled: false}, {value: '4', label: '有效', disabled: false}, ], props: { disabled: false, //是否禁用 } }, //switch 开关组件 { type: 'switch', title: '是否上架', field: 'is_show', value: '1', props: { disabled: false,//是否禁用 } }, //select 下拉选择组件 { type: 'select', field: 'cate_id', title: '产品分类', value: ['104', '105'], props: { multiple: true, //是否支持多选 disabled: false, //是否禁用 }, options: [ {'value': '104', 'label': '生态蔬菜', 'disabled': false}, {'value': '105', 'label': '新鲜水果', 'disabled': false}, ] }, //datePicker 日期选择组件 { type: 'datePicker', field: 'section_day', title: '活动日期', value: ['2018-02-20', '2021-02-20'], props: { type: 'daterange', //显示类型 year/month/date/dates/ week/datetime/datetimerange/daterange disabled: false, //禁用 } }, //timePicker 时间选择组件 { type: 'timePicker', field: 'section_time', title: '活动时间', value: ['01:01:01', '12:12:12'], props: { disabled: false, //禁用 isRange: true } }, //inputNumber 数组输入框组件 { type: 'inputNumber', field: 'sort', title: '排序', value: 0, props: { step: 0.1, //计数器步长, precision: 2, //数值精度 } }, //colorPicker 颜色选择组件 { type: 'colorPicker', field: 'color', title: '颜色', value: '#ff7271', props: { disabled: false, //是否禁用 }, }, //rate 评分组件 { type: 'rate', field: 'rate', title: '推荐级别', value: 3.5, props: { max: 10, //最大分值 disabled: false, //是否为只读 } }, //slider 滑块组件 { type: 'slider', field: 'slider', title: '滑块', value: [0, 50], props: { min: 0, //最小值 max: 100, //最大值 disabled: false, //是否禁用滑块 range: true, //是否为范围选择 } }, { type: 'wangEditor', field: 'txt', title: '富文本框', value: '<h1 style="color: #419bf7;">form-create</h1><a href="https://github.com/xaboy/form-create">GitHub</a>' }, //upload 上传组件 { type: 'upload', field: 'pic', title: '轮播图', value: ['http://file.lotkk.com/form-create.jpeg'], //input值 props: { uploadType: 'image', action: 'http://0.0.0.0:8000/index/index/upload.html', //必选参数，上传的地址 onSuccess: function (res, file) { file.url = res.data.filePath; }, //文件上传成功时的钩子，返回字段为 response, file, fileList } }, //frame 框架组件 { type: 'frame', title: '素材', field: 'fodder', value: ['http://file.lotkk.com/form-create.jpeg'], props: { type: 'image', //frame类型,有input,file,image src: '/iframe.html', //iframe地址 maxLength: 2, //value的最大数量 }, }, { type: 'tree', title: '权限', field: 'tree', value: [12, 13, 14], props: { showCheckbox: true, data: [ { title: 'parent 1', expand: true, selected: false, id: 1, children: [ { title: 'parent 1-1', expand: true, id: 2, children: [ { title: 'leaf 1-1-1', disabled: true, id: 11 }, { title: 'leaf 1-1-2', selected: true, id: 12 } ] }, { title: 'parent 1-2', expand: true, id: 3, children: [ { title: 'leaf 1-2-1', checked: true, id: 13, }, { title: 'leaf 1-2-1', id: 14, } ] } ] } ],//展示数据 props: { label: 'title' }, //配置选项 type: 'indeterminate', } } ] } 

addressEffect

import data from '@form-create/data/dist/province_city' //自定义属性 自动插入省市区数据 export default { name: 'address', components: ['cascader'], //rule初始化 init(val, rule, fapi) { rule.props.options = data; } } 

testSlot 组件

//自定义组件 Vue.component('testSlot', { render(h) { return h('div', {}, [this.$slots.asd]); } })