生成自定义表单组件

实现v-model的组件都可以称为表单组件

示例

自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    formCreate.component('inputBtn', {
        data: function () {
            return {
                num: this.value,
            }
        },
        render($h){
            return $h('ElButton',{
                props:{
                    disabled: this.disabled,
                    long: true  
                },
                on:{
                    click:()=>{
                        this.onClick()    
                    }    
                }    
            },['计数器'+this.num])
        },
        props:{
            //预定义
            disabled:Boolean,
            value:Number,
        },
        watch:{
            value(n){
                //同步 value 的值
                this.num = n
            }
        },
        methods: {
            onClick: function () {
                this.num++
                //更新组件内部的值
                this.$emit('input',this.num)
            },
        },
    })

    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    resetBtn:true
                },
                rule:[
                    {
                        type:'inputBtn',
                        field:'btn',
                        title:'自定义表单组件',
                        value:10,
                        update(val, rule, api){
                            api.setValue('input', '' + val);
                        }
                    },
                    {
                        type:'input',
                        field:'input',
                        title: '修改计数器的值',
                        value: '',
                        children: [
                            {
                                type:'ElButton',
                                slot:'append',
                                inject: true,
                                on: {
                                    click(inject){
                                        inject.$f.setValue('btn', parseInt(inject.$f.getValue('input')) || 0)
                                    }
                                },
                                children: ['修改']
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

预定义

定义好以下属性和事件,就能达到和内置组件相同的效果.赶快试一试吧

props

在自定义组件内部通过props接收一下属性

• value 组件的值
• disabled 组件的禁用状态

例如:

const compnent = Vue.extend({
  props:{
   value:String,
   disabled:Boolean      
  }
})

input 事件

通过input事件更新组件内部的值

当组件值发生变化后,通过 input 事件更新值.例如:

vm.$emit('input',newValue)

挂载自定义组件

要生成的自定义组件必须通过vue.component方法挂载到全局,或者通过formCreate.component方法挂载

例如:

formCreate.component('TestComponent',component)

生成

表单组件必须定义field属性

JSON

{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'自定义组件'
}

Maker

formCreate.maker.create('TestComponent','testField','自定义组件').value('test')

现在这个自定义组件就可以跟内置组件一样的去操作了