室内设计网站资源,温泉网站建设,咨询公司排名前十,淮南房产网el-dialog是使用率很高的组件
使用el-dialog很多都是按照文档的例子#xff0c;用一个变量控制是否显示#xff0c;再来一个变量控制标题。
如果我这个对话框多个地方使用的话还要创建多个变量#xff0c;甚至关闭之后还要清空一些变量#xff0c;应该可以简化一点。我写…
el-dialog是使用率很高的组件
使用el-dialog很多都是按照文档的例子用一个变量控制是否显示再来一个变量控制标题。
如果我这个对话框多个地方使用的话还要创建多个变量甚至关闭之后还要清空一些变量应该可以简化一点。我写vue的时候奉行的都是数据驱动像刚才那种写法没有问题也更灵活反正都是数据驱动的即使错误了也只是某些地方没正确处理数据而已。
所以封装也需要保持这些优点灵活可控。
以下是封装代码
一个.vue文件表示封装的相应el-dialog代码
templateel-dialog:titleconfigData.titleconfigData.afterTitlev-modelconfigData.openwidth700px:close-on-click-modalfalseappend-to-bodydiv classedit-data-dialogh1哈哈哈代码封装/h1/divtemplate #footerdiv classdialog-footerel-button clickconfigData.open false取 消/el-button/div/template/el-dialog
/templatescript
/*** 数据修改对话框*/
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,};},
});
/scriptstyle langscss 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使用的简单封装所有数据皆可外部指定且不用创建多个变量更灵活可控。
反正就是好用的非常。
有些封装不仅仅是模块分离还有代码分离反正就是一句话代码是先写给人看的然后才是机器。我奉行的封装是必要才封装不然是不会去封装的。
文章原文
