el-dialog是使用率很高的組件

使用el-dialog很多都是按照文檔的例子，用一個變量控制是否顯示，再來一個變量控制標題。

如果我這個對話框多個地方使用的話還要創建多個變量，甚至關閉之后還要清空一些變量，應該可以簡化一點。我寫vue的時候奉行的都是數據驅動，像剛才那種寫法沒有問題，也更靈活，反正都是數據驅動的，即使錯誤了也只是某些地方沒正確處理數據而已。

所以封裝也需要保持這些優點，靈活可控。

以下是封裝代碼

一個.vue文件，表示封裝的相應el-dialog代碼

<template><el-dialog:title="configData.title+configData.afterTitle"v-model="configData.open"width="700px":close-on-click-modal="false"append-to-body><div class="edit-data-dialog"><h1>哈哈哈，代碼封裝</h1></div><template #footer><div class="dialog-footer"><el-button @click="configData.open = false">取 消</el-button></div></template></el-dialog>
</template><script>
/*** 數據修改對話框*/
import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
import { mergeObjProperty } from '@/common/OtherTools';export default defineComponent({name: 'EditDataDialog',emits: ['onSuccess'],components: {},setup(_, { emit }) {const configMap = {//配置信息，初始化時使用open: {oldValue: false,},title: {oldValue: 'XX數據',},afterTitle: {oldValue: '',},isShow: {//是否只是展示oldValue: false,},};const configData = reactive(initDataByConfig(configData,{},configMap));const dataContainer = reactive({loading:false,form:{},list:[],});/** 初始化數據（外部調用） */function initData(show = true, data_ = {}, option = {}) {initDataByConfig(configData,option,configMap);dataContainer.list = [];dataContainer.form = {};dataContainer.loading = false;configData.open = show;nextTick(() => {dataContainer.form = data_;getDataInfo();});}/** 獲取數據列表 */function getDataInfo() {}return {configData,initData,dataContainer,};},
});
</script><style lang="scss" scoped>
.edit-data-dialog {}
</style>

一個很簡單的例子，不用創建多個變量來控制顯示以及標題和各種雜七雜八的狀態，全部由外部指定，再由initDataByConfig方法初始化。

以下是initDataByConfig方法的代碼

/** * 根據配置信息初始化對象* 如果 option 有該屬性則使用該屬性，沒有則初始化* configMap example*  const configMap = {//配置信息，初始化時使用open: {oldValue: false,},title: {oldValue: '入庫',},afterTitle: {oldValue: '',},isShow: {//是否只是展示oldValue: false,},};*/
export function initDataByConfig(data = {}, configOption = {}, configMap = {}) {configOption = configOption || {};Object.keys(configMap).forEach(key => {//初始化一些配置信息if (Object.prototype.hasOwnProperty.call(configOption, key)) {data[key] = configOption[key];} else {if (typeof configMap[key].oldValue == 'function') {data[key] = configMap[key].oldValue();} else {data[key] = configMap[key].oldValue;}}});return data;
}

使用的話直接引用然后用ref獲取組件實例調用initData方法就行了。

這是我目前對el-dialog使用的簡單封裝，所有數據皆可外部指定且不用創建多個變量，更靈活可控。

反正就是好用的非常。

有些封裝不僅僅是模塊分離，還有代碼分離，反正就是一句話，代碼是先寫給人看的，然后才是機器。我奉行的封裝是必要才封裝，不然是不會去封裝的。

文章原文