# 组件联动
可以通过control配置项实现通过组件的值控制其他组件是否显示
# 属性说明
value : 当组件的值和
value全等时显示rule中的组件{ value:1, rule:[...] }handle
Function: 当handle方法返回true时显示rule中的组件{ handle:function(val, fApi){ return val === 1 }, rule:[...] }rule
Array: 该组件控制显示的组件{ value:1, rule:[ maker.number('满额包邮','postage_money',0) ] }append
string: 设置rule中的规则追加的位置v2.5.0+{ value:1, append:'goods_name' }prepend
string: 设置rule中的规则前置插入的位置v2.5.0+{ value:1, prepend:'goods_name' }child
boolean: 设置rule是否插入到指定位置的children中,默认添加到当前规则的children中v2.5.0+{ value:1, prepend:'goods_name', child: true }
注意
handle优先级大于value- 所有符合条件的
control都会生效, v2.5版本之前只有第一个生效
# handle示例
当评价小于3星时输入差评原因
<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示例v2.5.0+
当input3输入值后插入text4
<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>
# child示例v2.5.0+
当输入 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>
# 组合示例v2.5.0+
同时多个control生效
<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>