Vue2中實(shí)現(xiàn)dialog的封裝方式
最近在看公司以前的項(xiàng)目時(shí)發(fā)現(xiàn)，很多表單內(nèi)容較多的dialog是寫在列表組件內(nèi)的。
一個(gè)列表頁的查詢功能，其已經(jīng)包含了搜索的表單，再加上列表中的其他功能，例如：詳情、刪除、導(dǎo)出、導(dǎo)入、提交等操作都寫在這一個(gè)組件了，維護(hù)起來十分繁瑣。
所以，當(dāng)面對(duì)這種彈窗式的內(nèi)容添加的需求時(shí)，要么是跳轉(zhuǎn)路由到新的界面，要么是單獨(dú)封裝一個(gè)dialog組件。
這里借助這個(gè)機(jī)會(huì)展示一下dialog組件的封裝。
組件內(nèi)部只有一個(gè)dialog
dialog的控制可見變量最好寫在該組件內(nèi)，不要寫在父組件通過傳props的方式來實(shí)現(xiàn)，不然還要在父組件再維護(hù)一個(gè)變量，也是不夠特別優(yōu)雅。
<template>
<el-dialog
title="新增"
:visible="visibleDia"
@close="closeDia"
fullscreen
>
<!-- 彈窗內(nèi)容自定義 -->
<div slot="footer">
<el-button @click="saveInfo" type="primary">保存</el-button>
<el-button @click="closeDia" type="primary" plain>取消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'SaveDialog',
data() {
return {
visibleDia: false,
}
},
methods: {
openDia() {
this.visibleDia = true
},
closeDia() {
this.visibleDia = false
},
saveInfo() {
// 告訴父組件，保存成功
this.$emit('saveSuccess', true)
this.closeDia()
}
}
}
</script>
父組件調(diào)用
父組件調(diào)用彈窗組件時(shí)綁定一個(gè)ref屬性，可通過$refs調(diào)用此節(jié)點(diǎn)里的openDia方法，即可打開彈窗；
關(guān)閉彈窗為彈窗組件內(nèi)的邏輯，等事件處理完進(jìn)行自關(guān)閉即可。
<template>
<div>
<!-- 頁面其他內(nèi)容 -->
<el-button @click="handleAdd">新增</el-button>
<save-dialog
ref="saveDialog"
@saveSuccess="saveSuccess"
/>
</div>
</template>
<script>
import SaveDialog from './SaveDialog.vue'
export default {
name: 'Index',
components: { SaveDialog },
methods: {
handleAdd() {
this.$refs.saveDialog.openDia()
},
saveSuccess() {
// 此方法被調(diào)用時(shí)，說明彈窗的新增內(nèi)容已完成
}
}
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個(gè)總要點(diǎn)，對(duì)此有需要的朋友們學(xué)習(xí)下天。2019-02-02
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng)
我們項(xiàng)目開發(fā)中經(jīng)常遇到樣式里面會(huì)使用less和scss寫法, less,scss和stylus都是css的預(yù)處理器,這篇文章主要給大家介紹了關(guān)于Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng),需要的朋友可以參考下2024-05-05
vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在＜script?setup＞中獲取全局內(nèi)容的三種方式,文中通過介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對(duì)象本身（對(duì)象的增刪值）或者對(duì)象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見的示render函數(shù)2022-09-09
vue在mounted拿不到props中傳遞的數(shù)據(jù)問題
這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了create?vite?實(shí)例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。2018-01-01
vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
這周工作中遇見了一個(gè)表格動(dòng)態(tài)列的需求,下面這篇文章主要給大家介紹了關(guān)于vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06