使用form-create動態(tài)生成vue自定義組件和嵌套表單組件
更新時間：2019年01月18日 09:45:57 作者：xaboy
這篇文章主要介紹了使用form-create動態(tài)生成vue自定義組件和嵌套表單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用form-create動態(tài)生成vue自定義組件和嵌套表單組件
maker.create
通過建立一個虛擬 DOM的方式生成自定義組件
生成
Maker
let rule = [
formCreate.maker.create('i-button').props({
type:'primary',
field:'btn'
loading:true
})
]
$f = formCreate.create(rule);
上面的代碼是通過maker生成器動態(tài)生成一個正在加載的iview按鈕組件
Json
let rule = [
{
type:'i-button',
field:'btn'
props:{
type:'primary',
field:'btn',
loading:true
}
}
]
$f = formCreate.create(rule);
上面的代碼是通過json方式動態(tài)生成一個iview按鈕組件
修改
可以通過一下兩種方式動態(tài)修改組件的配置項
通過rule修改組件生成規(guī)則
rule[0].props.loading = false;
通過$f.component()方法獲取組件的生成規(guī)則并修改
$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('創(chuàng)建時間','create_at'),
formCreate.maker.radio('是否顯示','is_show').options([
{value:1,label:'顯示'},
{value:0,label:'不顯示'}
])
]
}
]
}
]
maker.template
通過模板的方式生成自定義組件,maker.createTmp方法是該方法的別名
生成
Maker
let rule = [
formCreate.maker.template('<i-button :loading="loading">{{text}}<i-button>',new Vue({
data:{
loading:true,
text:'正在加載中...'
}
}))
]
上面的代碼是通過maker生成器動態(tài)生成一個正在加載的iview按鈕組件
Json
let rule = [
{
type:'template',
template:'<i-button :loading="loading">{{text}}<i-button>',
vm:new Vue({
data:{
loading:true,
text:'正在加載中'
}
})
}
]
$f = formCreate.create(rule);
上面的代碼是通過Json方式動態(tài)生成一個iview按鈕組件
修改
可以通過一下兩種方式動態(tài)修改vm組件內(nèi)部的值
通過rule獲取自定義組件的vm并修改
rule[0].vm.text = '加載完畢'; rule[0].vm.loading = false;
通過$f.component()方法獲取自定義組件的vm并修改
$f.component().btn.vm.text = '加載完畢'; $f.component().btn.vm.loading = false;
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問題，感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue是組件化開發(fā)框架,所以對于vue應(yīng)用來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于高頻率Vue面試題以及答案的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue.js結(jié)合Ueditor富文本編輯器的實例代碼
本篇文章主要介紹了Vue.js結(jié)合Ueditor的項目實例代碼，這里整理了詳細(xì)的代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
很多情況下程序中使用的打印都是用戶無感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開發(fā),這種開發(fā)方式非常繁瑣,并且開發(fā)難度較大,本文給大家介紹了Electron實現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點、使用場景和示例展開詳細(xì)的說明，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼
jsMind是一個基于Js的思維導(dǎo)圖庫,jsMind是一個純JavaScript類庫,用于創(chuàng)建、展示和操作思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue頁面更新patch的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實現(xiàn)，過濾器為頁面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過濾器和全局過濾器2022-06-06