自定义组件
form-create 支持的在表单内部生成任何 vue 组件
::: tip 提醒
:::
通过标签生成组件
通过建立一个虚拟 DOM的方式生成自定义组件
JSON 生成
{
type:'i-button',
name: 'btn',
props:{
type:'primary',
field:'btn',
loading:true
},
children:['加载中']
}
Maker 生成
maker.create
参数:
{string} tab
组件名/标签名{string} field
{string} title
用法:
formCreate.maker.create('i-button','btn','自定义按钮')
生成
formCreate.maker.create('i-button').props({
type:'primary',
field:'btn',
loading:true
}).children(['加载中']).name('btn');
修改
通过$f.component()
方法获取组件的生成规则并修改
$f.component().btn.props.loading = false;
示例
let rule = [
{
type:'row',
children:[
{
type:'i-col',
props:{
span:12
},
children:[
formCreate.maker.input('商品名称','goods_name','iphone'),
formCreate.maker.number('商品价格','goods_price',8688)
]
},
{
type:'i-col',
props:{
span:12
},
children:[
formCreate.maker.dateTime('创建时间','create_at'),
formCreate.maker.radio('是否显示','is_show').options([
{value:1,label:'显示'},
{value:0,label:'不显示'}
])
]
}
]
}
]
通过模板生成组件
通过模板的方式生成自定义组件
JSON 生成
{
type:'template',
name:'btn'
template:'<i-button :loading="loading">{{text}}<i-button>',
vm: new Vue({
data:{
loading:true,
text:'正在加载中'
}
})
}
Maker 生成
参数:
{string} template
{Vue} vm
{string} field = undefined
{string} title = undefined
用法:
formCreate.maker.template('<i-button></i-button>',new Vue,'btn','自定义按钮')
maker.template
formCreate.maker.template('<i-button :loading="loading">{{text}}</i-button>',new Vue({
data:{
loading:true,
text:'正在加载中...'
}
})).name('btn')
修改
可以通过一下两种方式动态修改vm
组件内部的值
通过rule
获取自定义组件的vm
并修改
rule.vm.text = '加载完毕';
rule.vm.loading = false;
通过$f.component()
方法获取自定义组件的vm
并修改
$f.component().btn.vm.text = '加载完毕';
$f.component().btn.vm.loading = false;
如果修改后组件没有更新,请通过
$.sync
或$f.refresh
方法强制刷新