使用form-create動(dòng)態(tài)生成vue自定義組件和嵌套表單組件
使用form-create動(dòng)態(tài)生成vue自定義組件和嵌套表單組件
maker.create
通過(guò)建立一個(gè)虛擬 DOM的方式生成自定義組件
生成
Maker
let rule = [
formCreate.maker.create('i-button').props({
type:'primary',
field:'btn'
loading:true
})
]
$f = formCreate.create(rule);
上面的代碼是通過(guò)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);
上面的代碼是通過(guò)json方式動(dòng)態(tài)生成一個(gè)iview按鈕組件
修改
可以通過(guò)一下兩種方式動(dòng)態(tài)修改組件的配置項(xiàng)
通過(guò)rule修改組件生成規(guī)則
rule[0].props.loading = false;
通過(guò)$f.component()方法獲取組件的生成規(guī)則并修改
$f.component().btn.props.loading = false;
示例
let rule = [
{
type:'row',
children:[
{
type:'i-col',
props:{
span:12
},
children:[
formCreate.maker.input('商品名稱(chēng)','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
通過(guò)模板的方式生成自定義組件,maker.createTmp方法是該方法的別名
生成
Maker
let rule = [
formCreate.maker.template('<i-button :loading="loading">{{text}}<i-button>',new Vue({
data:{
loading:true,
text:'正在加載中...'
}
}))
]
上面的代碼是通過(guò)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);
上面的代碼是通過(guò)Json方式動(dòng)態(tài)生成一個(gè)iview按鈕組件
修改
可以通過(guò)一下兩種方式動(dòng)態(tài)修改vm組件內(nèi)部的值
通過(guò)rule獲取自定義組件的vm并修改
rule[0].vm.text = '加載完畢'; rule[0].vm.loading = false;
通過(guò)$f.component()方法獲取自定義組件的vm并修改
$f.component().btn.vm.text = '加載完畢'; $f.component().btn.vm.loading = false;
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element Dialog對(duì)話(huà)框的使用示例
這篇文章主要介紹了Element Dialog對(duì)話(huà)框的使用示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下2023-01-01
vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式
這篇文章主要介紹了vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
VUE3中引入.env下的環(huán)境變量,顯示process未定義問(wèn)題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開(kāi)發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴(lài)，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
Vue3實(shí)現(xiàn)跨標(biāo)簽頁(yè)通信的四種方式
在Vue應(yīng)用中,跨標(biāo)簽頁(yè)的通信通常涉及到兩個(gè)或多個(gè)瀏覽器標(biāo)簽頁(yè)之間的信息共享,由于每個(gè)標(biāo)簽頁(yè)或窗口都是獨(dú)立的JavaScript執(zhí)行環(huán)境,它們不能直接通過(guò)Vue或其他JavaScript庫(kù)來(lái)直接相互通信,但是,有一些方法可以實(shí)現(xiàn)這種跨標(biāo)簽頁(yè)的通信,以下是一些常用的跨標(biāo)簽頁(yè)通信方法2025-03-03