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>