自定义属性 v2.5.0+

通过自定义属性可以实现一些针对业务逻辑处理生成规则的扩展

内置的两个自定义属性

• required

• fetch

教程

1. 定义一个自定义属性扩展

const optionEffect = {
    //自定义属性的名称
    name: 'option',
    //属性绑定的组件,不设置或者'*'默认为全部组件
    components: '*',
    //rule初始化
    init({value}, rule, fapi) {
    },
    //rule开始加载
    load({value}, rule, fapi) {
    },
    //rule加载完成
    loaded({value}, rule, fapi) {
    },
    //属性值发生变化
    watch({value}, rule, fapi) {
    },
    //组件的值发生变化
    value({value}, rule, fapi) {
    },
    //control 生效
    control({value}, rule, fapi) {
    },
    //rule 移除
    deleted({value}, rule, fapi) {
    },
    //rule 生成
    mounted({value}, rule, fapi) {
    }
}

2. 挂载自定义属性扩展

formCreate.register(optionEffect)

3. 在规则中使用自定义属性

{
    type:'...',
    effect:{
        //option 是自定义的属性名称
        option:'any'
    }
    //...
}
//或者
{
    type:'...',
    //option 是自定义的属性名称
    $option:'any'
    //...
}

示例

自动设置组件的 options

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

<script>
    formCreate.register({
        name: 'option',
        init({value}, rule){
            setTimeout(() => {
                rule.options.push({label:value, value:value},{label:value + value, value:value + value})
            }, 300)
        }
    })

    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'select',
                        field: 'option',
                        title:'option',
                        options: [{label:'default', value:'default'}],
                        value:'default',
                        effect:{option: 'aaa'}
                    }
                ]
            }
            
        }
    }
</script>

监听组件value变化

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

<script>
    formCreate.register({
        name: 'option',
        value({value}, rule){
            rule.suffix = value + rule.value
        }
    })

    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'timePicker',
                        field:'time',
                        title:'time',
                        value:'',
                        effect:{option: 'time: '},
                        suffix:'default',
                        
                    }
                ]
            }
            
        }
    }
</script>

监听自定义属性变化

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

<script>
    formCreate.register({
        name: 'option',
        watch({value}, rule){
            rule.prefix = value + '  '
        }
    })

    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'timePicker',
                        field:'time',
                        title:'time',
                        value:'',
                        effect:{option: 1},
                        prefix:'1  ',
                        suffix:{
                            type:'ElButton',
                            on:{
                                click:()=>{
                                    this.rule[0].effect.option++
                                }
                            },
                            children: ['prefix+1']
                        },
                        
                    }
                ]
            }
            
        }
    }
</script>