Custom attribute v2.5.0+

Some extensions to business logic processing generation rules can be achieved through custom attributes

Tutorials

1. Define a custom attribute extension

const optionEffect = {
    //The name of the custom attribute
    name: 'option',
    //Attribute bound components, not set or'*' defaults to all components
    components: '*',
    //rule initialization
    init({value}, rule, fapi) {
    },
    //rule loaded
    loaded({value}, rule, fapi) {
    },
    //Attribute value changed
    watch({value}, rule, fapi) {
    },
    //The value of the component changes
    value({value}, rule, fapi) {
    },
    //control takes effect
    control({value}, rule, fapi) {
    },
    //rule remove
    deleted({value}, rule, fapi) {
    },
    //rule mounted
    mounted({value}, rule, fapi) {
    }
}

2. Mount custom attribute extension

formCreate.register(optionEffect)

3. Use custom attributes in rules

{
    type:'...',
    effect:{
        //option is a custom attribute name
        option:'any'
    }
    //...
}

Example

Automatically set the component's 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>

Monitoring component value changes

<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>

Monitor custom attribute changes

<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>