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

反正就是好用的非常。

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

文章原文

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/90669.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言生存分析(机器学习)(1)——GBM(梯度提升机)

GBM是一种集成学习算法&#xff0c;它结合了多个弱学习器&#xff08;通常是决策树&#xff09;来构建一个强大的预测模型。GBM使用“Boosting”的技术来训练弱学习器&#xff0c;这种技术是一个迭代的过程&#xff0c;每一轮都会关注之前轮次中预测效果较差的样本&#xff0c;…

Docker中部署redis

1.部署redis要求 2.部署教程 连接容器中的redis redis部署完毕

Redis之缓存雪崩、缓存击穿、缓存穿透问题

文章目录 前言一、缓存雪崩1.1、原因分析2.2、常用解决方案 二、缓存击穿2.1、原因分析2.2、常用解决方案2.2.1、使用互斥锁2.2.2、逻辑过期方案2.3、方案对比 三、缓存穿透3.1、原因分析3.2、解决方案3.2.1、缓存空对象3.2.3、布隆过滤3.3、方案对比 总结 前言 本文谈谈Redis…

CCF C³ 走进百度:大模型与可持续生态发展

2023年8月10日&#xff0c;由CCF CTO Club发起的第22期C活动在百度北京总部进行&#xff0c;以“AI大语言模型技术与生态发展”主题&#xff0c;50余位企业界、学界专家、研究人员就此进行深入探讨。 CCF C走进百度 本次活动&#xff0c;CCF秘书长唐卫清与百度集团副总裁、深…

ISIS技术(第三十七课)

1 分享一下华为官网上的一张地图 官网地址:https://support.huawei.com/hedex/hdx.do?docid=EDOC1000105967&id=ZH-CN_CONCEPT_0000001501534705 2 路由的分类 -直连路由 直接连接的路由,且配置了IP地址之后(在同一网段内),就是直连路由。 -非直连路由 -静态路由…

深眸科技|发现AI+3D视觉的价值,技术升级加速视觉应用产品国产替代

随着中国工业化进程的不断深入和智能制造浪潮的影响&#xff0c;工业生产对于机器视觉技术的需求不断攀升&#xff0c;其应用范围覆盖了工业领域的众多行业&#xff0c;包括3C电子、汽车、半导体、新能源、物流等。 据GGII发布的最新数据显示&#xff0c;近年来我国机器视觉市…

Ubuntu设置定时重启

1.安装/更新 cron 安装crontab sudo apt-get install cron更新命令 sudo apt-get update2.配置cron定时任务 sudo nano /etc/crontab* * * * * root reboot(从左到右&#xff0c;五个 * 依次是 分&#xff0c;时 &#xff0c;天&#xff0c;月&#xff0c;星期)下列命令表示…

安科瑞物联网表在虚拟电厂的应用

安科瑞 崔丽洁 应用场景 一般应用于控制中心 功能 能计量当前组合有功电能&#xff0c;正向有功电能&#xff0c;反向有功电能&#xff0c;正向无功电能&#xff0c;反向无功电能&#xff1b; ADW300支持RS485通讯、LORA通讯、NB、4G及Wifi通讯&#xff1b; 三套时段表,一年可以…

css中的var函数

css中的var函数 假设我们在css文件存在多个相同颜色值&#xff0c;当css文件越来越大的时候&#xff0c;想要改颜色就要手动在每个旧颜色上修改&#xff0c;这样维护工作非常难进行。 但是我们可以使用变量来存储值&#xff0c;这样可以在整个css样式表中重复使用&#xff0c…

硬盘文件恢复怎么做?文件恢复,问题已解决!

“请问一下可以帮我恢复硬盘里的文件吗&#xff1f;我之前删除了一些重要的文件和数据&#xff0c;但是最近我突然想起来那些文件是很有用的&#xff0c;有没有什么好的方法可以帮我恢复硬盘中的文件呢&#xff1f;” 硬盘作为电脑的存储设备&#xff0c;电脑用户通常会将各种重…

【Vue-Router】使用 prams 路由传参失效

报错信息&#xff1a; [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating. list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水",&quo…

springBoot 简单的demo

springBoot 学习开始 场景开发流程1、创建项目2、导入依赖3、创建启动springBoot 项目的主入口程序4、创建业务程序5、在MainApplication文件运行程序6、将文件打包成jar包 遇到的问题未解决 希望大哥们帮忙--本地运行jar包报错 场景 浏览器发送hello请求&#xff0c;返回“he…

Jquery 复选框点击生成标签 源代码

html <!DOCTYPE html> <html><head><meta charset"utf-8"><title>服务资源管理</title><link rel"stylesheet" type"text/css" href"../lib/layui/css/layui.css" /><link rel"st…

image has dependent child images

问题&#xff1a;很多none的镜像无法被删除 解决过程&#xff1a; 1、通过 docker image prune -f 提示可删除为 0 2、直接进行删除报错&#xff1a; docker rmi 8f5116cbc201Error response from daemon: conflict: unable to delete 8f5116cbc201 (cannot be forced) - im…

NSI45030AT1G LED驱动器方案为汽车外部及内部照明恒流稳流器(CCR)方案

关于线性恒流调节器&#xff08;CCR&#xff09;&#xff1a;是一种用于控制电流的稳定输出。它通常由一个功率晶体管和一个参考电流源组成。CCR的工作原理是通过不断调节功率晶体管的导通时间来维持输出电流的恒定。当输出电流超过设定值时&#xff0c;CCR会减少功率晶体管的导…

windows下dll文件的创建详细教程

1、前言 dll文件是啥&#xff0c;就不作过多赘述了。现在直接教大家如何创建与使用dll文件。 本文基于windows系统&#xff0c;使用的编译相关工具为visual studio 2019。 2、创建dll 2.1 创建dll工程 首先打开visual studio&#xff0c;然后选择创建新项目&#xff0c;在搜…

pdf怎么压缩?一分钟学会文件压缩方法

PDF文件过大一般主要原因就是内嵌大文件、重复的资源或者图片比较多&#xff0c;随之而来的问题就是占用存储空间、被平台限制发送等等&#xff0c;这时候我们可以通过压缩的方法缩小PDF文件大小&#xff0c;下面就一起来看看具体的操作方法吧。 方法一&#xff1a;嗨格式压缩大…

2023年国赛数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

面试热题(数组中的第K个最大元素)

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 输入: [3,2,1,5,6,4] 和 k 2 输出: 5提到数组中最大元素&#xff0c;我们往往想到就是先给数组…

用免费Leangoo敏捷看板工具进行可视化的缺陷跟踪管理

用Leangoo敏捷看板进行可视化的缺陷跟踪管理 缺陷管理通常关注如下几个方面&#xff1a; 1. 缺陷的处理速度 2. 缺陷处理的状态 3. 缺陷的分布 4. 缺陷产生的原因 使用Leangoo敏捷看板我们可以对缺陷进行可视化的管理&#xff0c;方便我们对缺陷的处理进展、负责人、当前…