element-ui 彈窗組件封裝的步驟
封裝el-dialog為一個(gè)組件
我們?cè)谑褂胑lement-ui的時(shí)候，如果一個(gè)彈窗中的內(nèi)容很多，那么我們經(jīng)常會(huì)把這個(gè)彈窗封裝成一個(gè)組件，如下：
<!-- 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會(huì)修改 props，并報(bào)錯(cuò)
但是這樣會(huì)有一個(gè)問(wèn)題，當(dāng)觸發(fā)了el-dialog內(nèi)部的關(guān)閉事件時(shí)， 比如點(diǎn)擊彈窗陰影等， 它會(huì)emit事件來(lái)修改當(dāng)前組件的props [visible]，由于組件不能直接修改prop屬性，然后就會(huì)報(bào)錯(cuò)。
我們新增了一個(gè)中間變量innerVisible，來(lái)攔截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]的時(shí)候，我們會(huì)通過(guò)emit('update:')的方式來(lái)通知父組件，避免直接修改props。當(dāng)然父組件需要加上sync修飾符來(lái)接受修改：
<!-- father.vue html --> <DetailDialog :visible.sync="detailVisible" />
到此為止，封裝的彈窗組件已經(jīng)沒(méi)有問(wèn)題了。
繼續(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，使用起來(lái)就更高大上而且整潔了
<!-- father.vue html --> <DetailDialog v-model="detailVisible" />
繼續(xù)優(yōu)化，封裝成mixins
當(dāng)頻繁封裝彈窗組件時(shí)，那么上述邏輯也需要不停地復(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)
}
}
}
}
那么封裝彈窗插件時(shí)，只需引入mixins即可完成顯示隱藏邏輯。
// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
mixins: [vModelDialog],
}
</script>
以上就是element-ui 彈窗組件封裝的步驟的詳細(xì)內(nèi)容，更多關(guān)于element-ui 彈窗組件封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過(guò)實(shí)例代碼給大家介紹vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
vue element-ui中table合計(jì)指定列求和實(shí)例
這篇文章主要介紹了vue element-ui中table合計(jì)指定列求和實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端的左右滑動(dòng)事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue-cli中的圖片資源存放位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對(duì)大家的項(xiàng)目來(lái)說(shuō)非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實(shí)現(xiàn)方法及其錯(cuò)誤的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作
在Vue3中,通過(guò)useRouter和useRoute可以方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航和路由變化監(jiān)聽(tīng),useRouter允許進(jìn)行頁(yè)面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效2024-09-09
這篇文章主要介紹了vue項(xiàng)目如何全局修改el-button樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07