element-ui 彈窗組件封裝的步驟
封裝el-dialog為一個組件
我們在使用element-ui的時候，如果一個彈窗中的內(nèi)容很多，那么我們經(jīng)常會把這個彈窗封裝成一個組件，如下：
<!-- DetailDialog.vue html --> <template> <el-dialog title="標(biāo)題" :visible.sync="visible" width="720px" > <p>彈窗內(nèi)容</p> </el-dialog> </template>
// DetailDialog.vue js
<script>
props: {
visible: {
type: Boolean,
default: false
}
}
</script>
el-dialog會修改 props，并報錯
但是這樣會有一個問題，當(dāng)觸發(fā)了el-dialog內(nèi)部的關(guān)閉事件時， 比如點(diǎn)擊彈窗陰影等， 它會emit事件來修改當(dāng)前組件的props [visible]，由于組件不能直接修改prop屬性，然后就會報錯。
我們新增了一個中間變量innerVisible，來攔截props [visible]的修改和獲取
<!-- DetailDialog.vue html --> <template> <el-dialog title="標(biāo)題" :visible.sync="innerVisible" width="720px" > <p>彈窗內(nèi)容</p> </el-dialog> </template>
// DetailDialog.vue js
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
這樣在el-dialog內(nèi)部修改prop[visible]的時候，我們會通過emit('update:')的方式來通知父組件，避免直接修改props。當(dāng)然父組件需要加上sync修飾符來接受修改：
<!-- father.vue html --> <DetailDialog :visible.sync="detailVisible" />
到此為止，封裝的彈窗組件已經(jīng)沒有問題了。
繼續(xù)優(yōu)化，使用v-model控制顯示隱藏
// DetailDialog.vue js
<script>
export default {
model: {
prop: 'visible', // 修改 v-model 綁定的props名稱
event: 'toggle' // 修改 v-model 綁定的自定義事件名
},
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('update:toggle', val)
}
}
}
}
</script>
接入了v-model，使用起來就更高大上而且整潔了
<!-- father.vue html --> <DetailDialog v-model="detailVisible" />
繼續(xù)優(yōu)化，封裝成mixins
當(dāng)頻繁封裝彈窗組件時，那么上述邏輯也需要不停地復(fù)制，所以繼續(xù)優(yōu)化，把上述控制顯示隱藏的邏輯封裝成了mxins，直接復(fù)用即可
// vModelDialog.js
export default {
model: {
prop: 'visible',
event: 'toggle'
},
props: {
visible: {
type: Boolean,
default: () => {
return false
}
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('toggle', val)
}
}
}
}
那么封裝彈窗插件時，只需引入mixins即可完成顯示隱藏邏輯。
// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
mixins: [vModelDialog],
}
</script>
以上就是element-ui 彈窗組件封裝的步驟的詳細(xì)內(nèi)容，更多關(guān)于element-ui 彈窗組件封裝的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云
這篇文章主要介紹了VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在開始學(xué)習(xí)vue的時候,對于新手安裝這個環(huán)境是真的搞人心態(tài),不友好,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue項(xiàng)目中使用iconfont方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實(shí)現(xiàn)一個完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中使用v-for時為什么不能用index作為key，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue在解析我們的組件時， 是通過打包成一個 js 文件，當(dāng)我們的一個組件 引入過多子組件是，頁面的首屏加載時間 由最后一個組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下2022-12-12
vue.js 解決v-model讓select默認(rèn)選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這15個Vue指令,讓你的項(xiàng)目開發(fā)爽到爆
這篇文章主要介紹了這15個Vue指令,讓你的項(xiàng)目開發(fā)爽到爆，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-10-10