Vue2中實現dialog的封裝方式
最近在看公司以前的項目時發(fā)現,很多表單內容較多的dialog是寫在列表組件內的。
一個列表頁的查詢功能,其已經包含了搜索的表單,再加上列表中的其他功能,例如:詳情、刪除、導出、導入、提交等操作都寫在這一個組件了,維護起來十分繁瑣。
所以,當面對這種彈窗式的內容添加的需求時,要么是跳轉路由到新的界面,要么是單獨封裝一個dialog組件。
這里借助這個機會展示一下dialog組件的封裝。
組件內部只有一個dialog
dialog的控制可見變量最好寫在該組件內,不要寫在父組件通過傳props的方式來實現,不然還要在父組件再維護一個變量,也是不夠特別優(yōu)雅。
<template>
<el-dialog
title="新增"
:visible="visibleDia"
@close="closeDia"
fullscreen
>
<!-- 彈窗內容自定義 -->
<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>
父組件調用
父組件調用彈窗組件時綁定一個ref屬性,可通過$refs調用此節(jié)點里的openDia方法,即可打開彈窗;
關閉彈窗為彈窗組件內的邏輯,等事件處理完進行自關閉即可。
<template>
<div>
<!-- 頁面其他內容 -->
<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() {
// 此方法被調用時,說明彈窗的新增內容已完成
}
}
}
</script>總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
關于Vue3中element-plus的el-dialog對話框無法顯示的問題及解決方法
最近今天在寫一個停車場管理系統(tǒng)的項目時,在用vue3寫前端時,在前端模板選擇上,我一時腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯誤連連,下面給大家分享dialog對話框無法顯示的原因,感興趣的朋友一起看看吧2023-10-10
Vue.2.0.5實現Class 與 Style 綁定的實例
本篇文章主要介紹了Vue.2.0.5實現Class 與 Style 綁定的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
關于@click.native中?.native?的含義與使用方式
這篇文章主要介紹了關于@click.native中?.native?的含義與使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
Vue路由守衛(wèi)及頁面登錄權限控制的設置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權限控制的設置方法,本文通過實例代碼通過兩種方法給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue3與webpack5安裝element-plus樣式webpack編譯報錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報錯,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04

