Component linkage

You can control whether other components are displayed through the value of the component through the control configuration item

Property description

• value : Display components in rule when the value of the component is congruent

  {
      value:1,
      rule:[...]
  }
  

• handle Function : Show components in rule when handle method returns true

  {
      handle:function(val, fApi){
          return val === 1
      },
      rule:[...]
  }
  

• rule Array : The component that controls the display

  {
      value:1,
      rule:[
          maker.number('满额包邮','postage_money',0)
      ]
  }
  

• append string : Set the position of the rule appended in rulev2.5.0+

  {
      value:1,
      append:'goods_name'
  }
  

• prepend string : Set the pre-insertion position of the rule in rulev2.5.0+

  {
      value:1,
      prepend:'goods_name'
  }
  

• child boolean : Set whether the rule is inserted into the children at the specified position, and is added to the children of the current rule by defaultv2.5.0+

  {
      value:1,
      prepend:'goods_name',
      child: true
  }
  

notice

• handle priority is greater than value
• All eligible 'controls' will take effect. Before v2.5, only the first one will take effect

handleExample

Enter the reason for the bad review when the review is less than 3 stars

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'rate',
                        field: 'star',
                        title:'评分',
                        value:5,
                        control:[
                            {
                                handle(val){
                                    return val < 3
                                },
                                rule:[
                                    {
                                        type:'input',
                                        field:'info',
                                        title:'差评原因',
                                        value:'default info', 
                                    } 
                                ]   
                            }                                              
                        ]
                    }
                ]
            }
            
        }
    }
</script>

apppend example v2.5.0+

Insert text 4 when input3 enters the value

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field: 'input1',
                        title:'input1',
                        value:'',
                    },
                    {
                        type:'input',
                        field: 'input2',
                        title:'input2',
                        value:'',
                    },
                    {
                        type:'input',
                        field: 'input3',
                        title:'input3',
                        value:'',
                        control:[
                            {
                                handle: (val)=>!!val,
                                append: 'input1',
                                rule:[
                                    {
                                        type:'input',
                                        field: 'input4',
                                        title:'input4',
                                        value:'',
                                    } 
                                ]   
                            }                                              
                        ]
                    },
                ]
            }
            
        }
    }
</script>

childExamplev2.5.0+

Append slot when typing append

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field: 'slot',
                        title:'插槽',
                        value:'appen',
                        control:[
                            {
                                value: 'append',
                                child: true,
                                rule:[
                                    {
                                        type:'button',
                                        slot:'append',
                                        children:['append'] 
                                    } 
                                ]   
                            }                                              
                        ]
                    }
                ]
            }
            
        }
    }
</script>

Combination examplev2.5.0+

Multiple control take effect simultaneously

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field: 'input',
                        title:'input',
                        value:'',
                        control:[
                            {
                                handle: val=>!!val,
                                child: true,
                                rule:[
                                    {
                                        type:'button',
                                        slot:'append',
                                        children:['append'] 
                                    } 
                                ]   
                            },
                            {
                                handle: val=>!!val,
                                rule:[
                                    {
                                        type:'rate',
                                        field: 'star',
                                        title:'评分',
                                        value:5,
                                    } 
                                ]   
                            }                                             
                        ]
                    }
                ]
            }
            
        }
    }
</script>