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