功能演示 | FormCreate

<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]);
    }
})

← 在线示例更新记录 →