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

news/2024/11/20 5:51:43/

这篇文章,介绍一下如何使用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.ppmy.cn/news/1548423.html

相关文章

Vue3项目实战(vue3+vite+pinia+element-plus+axios+mock)

许苑后台管理系统 一、项目介绍1、技术栈2、业务功能3、应用场景4、项目源码 二、项目实战2.1、项目初始化2.2、项目实战1、引入router配置2、App.vue组件引入3、创建RootView根路由组件4、依次创建5、进行对应各个环境的配置环境设置 一、项目介绍 1、技术栈 vue3vitevue-rou…

《YOLO:目标检测领域的璀璨之星》

《YOLO:目标检测领域的璀璨之星》 一、YOLO 目标检测算法二、YOLO 的技术原理(一)YOLOv1 的原理(二)后续版本的改进 三、YOLO 与其他目标检测算法的比较(一)与 DETR 的比较(二&#…

倒计时功能分享

今天想要分享的是一个面试题,也是一个我们在项目中常用的功能:倒计时。 首先我们在写倒计时的时候必须要考虑到是:准确性、性能。接下来我们一步一步实现这个完美地倒计时功能。 setInterval 先来简单实现一个倒计时的函数: func…

蓝桥杯每日真题 - 第14天

题目:(2022) 题目描述(13届 C&C B组A题) 解题思路: 定义状态: 使用一个二维数组 dp[j][k] 来表示将数字 k 拆分为 j 个不同正整数的方案数。 初始化: 初始状态设定为 dp[0][0]…

实用教程:如何无损修改MP4视频时长

如何在UltraEdit中搜索MP4文件中的“mvhd”关键字 引言 在视频编辑和分析领域,有时我们需要深入到视频文件的底层结构中去。UltraEdit(UE)和UEStudio作为强大的文本编辑器,允许我们以十六进制模式打开和搜索MP4文件。本文将指导…

鸿蒙生态开发以及技术栈介绍

​🌈个人主页:前端青山 🔥系列专栏:鸿蒙开发篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来鸿蒙开发篇专栏内容: 有没有可以2小时不用手机的? 打开电视用什么? 打开空调用什么&a…

React教程第二节之虚拟DOM与Diffing算法理解

1、什么是虚拟DOM 虚拟DOM 是javascript的一个对象,是内存中的一种数据结构,以树的形式存储UI的状态,树中的每个节点都代表着真实的DOM,用来描述我们希望在页面看到的 HTML结构; 现在的MVVM 框架,大多使用…

CSM32RV20:RISC-V核的低功耗MCU芯片,常用在智能门锁上

CSM32RV20是一款基于RISC-V核的低功耗MCU芯片。 内置RISC-V RV32IMAC内核(2.6CoreMark/MHz); 蕞高32MHz工作频率; 内置4kB的SRAM; 内置8B的ALWAYS寄存器,能在掉电模式2下保存数据; 内置40kB的嵌…