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
使用的简单封装,所有数据皆可外部指定且不用创建多个变量,更灵活可控。
反正就是好用的非常。
有些封装不仅仅是模块分离,还有代码分离,反正就是一句话,代码是先写给人看的,然后才是机器。我奉行的封装是必要才封装,不然是不会去封装的。