【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件

这篇文章,介绍一下如何使用vue3+element-plus中的el-dialog组件,自己封装一个通用的弹出窗口组件。运行效果如下所示:

目录

1.1、父子组件通信

1.2、自定义VDialog组件(【v-model】模式)

1.2.1、编写VDialog组件代码

1.2.2、使用VDialog组件

1.2.3、运行效果

1.3、自定义VDialog组件(【v-model:属性名称】模式)

1.3.1、创建VDialog组件

1.3.2、使用组件


1.1、父子组件通信

要自定义一个组件,首先需要学习一下Vue中的父子组件通信的知识点,可以看下我之前写的笔记文章。

【Vue笔记】Vue组件的创建、使用以及父子组件数据通信常见的几种方式

1.2、自定义VDialog组件(【v-model】模式)

v-model模式下,默认的属性名称是【modelValue】,

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

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

相关文章

Spring Cloud Alibaba [Gateway]网关。

1 简介 网关作为流量的入口,常用功能包括路由转发、权限校验、限流控制等。而springcloudgateway 作为SpringCloud 官方推出的第二代网关框架,取代了Zuul网关。 1.1 SpringCloudGateway特点: (1)基于Spring5,支持响应…

不完全微分PID控制算法

不完全微分PID控制算法是一种改进的PID控制方法,主要针对PID控制中的微分环节对高频噪声敏感的问题。通过对微分项进行优化和改造,减少其对噪声的放大作用,同时保留对系统动态变化的响应能力。 不完全微分PID控制原理 不完全微分的核心思想是…

DataOps for LLM 的数据工程技术架构实践

导读 在 LLM 蓬勃发展的今天,数据工程已成为支持大规模 AI 模型训练的基石。DataOps 作为数据工程的重要方法论,通过优化数据集成、转换和自动化运维,加速数据到模型的闭环流程。本文聚焦新一代数据 & AI 集成工具- Apache SeaTunnel 在…

go-zero(七) RPC服务和ETCD

go-zero 实现 RPC 服务 在实际的开发中,我们是通过RPC来传递数据的,下面我将通过一个简单的示例,说明如何使用go-zero框架和 Protocol Buffers 定义 RPC 服务。 一、生成 RPC项目 在这个教程中,我们根据user.api文件&#xff0…

【c++丨STL】list模拟实现(附源码)

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:C、STL 目录 前言 一、节点、迭代器以及函数声明 二、list功能实现 1. 节点 2. 迭代器 迭代器的默认构造 operator* operator-> 前置和-- 后置和--…

SpringBoot:不支持发行版本17超详细解决办法

一开始linux中就已经下好了JDK21,但是后来创建项目的时候选用了JDK23,导致环境错乱,估计大部分都是因为这个原因,接下来我会一步步带大家解决。 检查系统环境(以Ubuntu为例) 没有下载JDK的可以在官网下载…

计算机网络中的数据包传输机制详解

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 引言 数据包的基本概念…

Springboot3.3.5 启动流程之 tomcat启动流程介绍

在文章 Springboot3.3.5 启动流程(源码分析) 中讲到 应用上下文(applicationContext)刷新(refresh)时使用模板方法 onRefresh 创建了 Web Server. 本文将详细介绍 ServletWebServer — Embedded tomcat 的启动流程。 首先&…

HarmonyOs鸿蒙开发实战(9)=>解析json数据,自动生成实体Bean插件-jsonFormat使用教程(铁粉福利)

1.条件:基于HarmonyOs5.0.0版本. 2.老规矩先看效果> 3.第一步 >下载jsonFormat.jar文件,使用版本1.0.5-deveco https://plugins.jetbrains.com/plugin/24930-jsonformat/versions/stable 4.第二步 > 在DevEco Stuio中安装插件 5.第三步 > 新建bean文件&#xff…

VSCode+ESP-IDF开发ESP32-S3-DevKitC-1(2)第一个工程 LED心跳灯

VSCodeESP-IDF开发ESP32-S3-DevKitC-1(2)第一个工程 LED心跳灯 前言1.新建工程2.编写控制LED代码3.LED控制独立成.c和.h文件 前言 实际开发中很多时候我们需要有一个类似心跳灯或运行指示灯的灯以不同的状态闪烁以表示程序的运行状态,所以第…

系统掌握大语言模型提示词 - 从理论到实践

以下是我目前的一些主要个人标签: 6 年多头部大厂软件开发经验;1 年多 AI 业务应用经验,拥有丰富的业务提示词调优经验和模型微调经验。信仰 AGI,已经将 AI 通过自定义 Chatbot /搭建 Agent 融合到我的工作流中。头部大厂技术大学…

FromData格式提交接口时入参被转成JSON格式问题

本地上传文件后通过事件提交文件,一般先通过前端组件生成文本流,在通过接口提交文本流,提交文本流一般使用FormData的入参形式传入,接口请求头也默认"Content-Type": “multipart/form-data”,但是某些场景统…

【插件】重复执行 pytest-repeat

安装 pip3 install pytest-repeat 用法 1.命令行 pytest --count num pytest --count 32.装饰器 pytest.mark.repeat(num) #num运行次数 pytest.mark.repeat(5)#执行结果如下:

【Spring】循环引用 解决流程,只用一二级缓存?

文章目录 循环引用循环引用循环引用解决流程为什么不只用一二级缓存?:red_circle: 循环引用 循环引用 循环依赖:循环依赖其实就是循环引用,也就是bean互相持有对方,最终形成闭环。比如A依赖于B,B依赖于A 循环依赖在…

【青牛科技】视频监控器应用

1、简介: 我司安防产品广泛应用在视频监控器上,产品具有性能优良,可 靠性高等特点。 2、图示: 实物图如下: 3、具体应用: 标题:视频监控器应用 简介:视频监控器工作原理是光&#x…

机器学习day5-随机森林和线性代数1最小二乘法

十 集成学习方法之随机森林 集成学习的基本思想就是将多个分类器组合,从而实现一个预测效果更好的集成分类器。大致可以分为:Bagging,Boosting 和 Stacking 三大类型。 (1)每次有放回地从训练集中取出 n 个训练样本&…

5G与4G互通的桥梁:N26接口

5G的商用部署进程将是一个基于4G系统进行的长期的替换、升级、迭代的过程,4G系统是在过渡到5G全覆盖过程中,作为保障用户业务连续性体验这一目的的最好补充。 因此4G/5G融合组网,以及互操作技术将是各大运营商在网络演进中需要重点考虑的问题…

统信UOS开发环境支持Golang

UOS为Golang开发者提供了各种编辑器和工具链的支持,助力开发者实现高质量应用的开发。 文章目录 一、环境部署Golang开发环境安装二、代码示例Golang开发案例三、常见问题1. 包导入错误2. 系统资源限制一、环境部署 Golang开发环境安装 golang开发环境安装步骤如下: 1)安装…

【c++丨STL】list的使用

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:C、STL 目录 前言 list简介 一、list的默认成员函数 构造函数(constructor) 析构函数 赋值重载 二、list的迭代器接口 迭代器的功能分类 三、list的容量…

如何解决JAVA程序通过obloader并发导数导致系统夯住的问题 | OceanBase 运维实践

案例背景 某保险机构客户的数据中台,自系统上线后不久,会定期的用 obload 工具从上游业务系统导入数据至OceanBase数据库。但,不久便遇到了应用服务器的 Memory 与 CPU 资源占用持续攀升,最终导致系统夯住而不可用的异常。 memo…