element-ui的el-dialog，简单的封装。

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使用的简单封装，所有数据皆可外部指定且不用创建多个变量，更灵活可控。

反正就是好用的非常。

有些封装不仅仅是模块分离，还有代码分离，反正就是一句话，代码是先写给人看的，然后才是机器。我奉行的封装是必要才封装，不然是不会去封装的。

文章原文