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