element-plus组件中的el-drawer的使用

在项目的制作过程中经常会用到弹窗组件,这里假设一种情况当你在一个页面需要多个弹窗组件的时候怎么样才能精准的打开和关闭对应的弹窗呐??
① 绑定一个点击事件----【给点击事件传入一个下标】这里是打开事件
② 使用element-plus中的 :before-close点击关闭事件,但是在这里需要传入一个done,所以我的传递方式是这样的

<div><!-- 点击图标显示抽屉组件 --><div :key="1" @click="displayDrawer(1)" style="z-index:6666; position: absolute;left: 46%; top: 5%;"><svg-icon width="30px" height="30px" name="zuopinxiangqing"></svg-icon></div><!-- 抽屉组件1 --><el-drawer :key="1" v-model="drawerList[0].display" title="作品详情1" :direction="direction":before-close="(done:any) => handleClose(done, 2)"  :index="1" style="right: 50%;"><span>Hi there! This is drawer 1.</span></el-drawer></div>
<div><!-- 点击图标显示抽屉组件 --><div :key="2" @click="displayDrawer(2)"style="z-index:6666; width: 45px; display: flex; justify-content: flex-end; padding-right: 15px; "><svg-icon width="30px" height="30px" name="zuopinxiangqing"></svg-icon></div><!-- 多个抽屉组件 --><!-- 抽屉组件2 --><el-drawer :key="2" v-model="drawerList[1].display" title="作品详情2" :direction="direction":before-close="(done:any) => handleClose(done, 2)" :index="2"><span>Hi there! This is drawer 2.</span></el-drawer></div>

这里有两个弹窗和对应的两个点击事件

<script>
const drawerList = ref([{ index: 1, title: '作品详情1', display: false },{ index: 2, title: '作品详情2', display: false }
]);
const displayDrawer = (index: any) => {drawerList.value[index - 1].display = true;
};const handleClose = (done: any, index: any) => {drawerList.value[index - 1].display = false;done()
};
</script>

这里的

:before-close="(done:any) => handleClose(done, 2)"

这里我不是很清楚done的状态和类型方法所以使用了上面的方式将数据进行了传递,最终效果。
在这里插入图片描述
在这里插入图片描述
这里实现了左右两个弹窗!!!

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

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

相关文章

工商业分布式光伏电站的盈利模式有哪些?

工商业光伏系统&#xff0c;是安装于机关事业单位、医院、学校、商场、写字楼、工商业园区等工商业相关建筑屋顶的光伏并网系统&#xff0c;通常属于分布式光伏项目。具有投资成本低、回报周期短、回报稳定、就近开发等特点&#xff0c;可以大幅度提升光伏发电利用率。 工商业…

图像处理中的角点检测Python-OpenCV 中的实现

马丁亚当斯 (Martin Adams)在Unsplash上拍摄的照片 一、说明 在图像处理的背景下&#xff0c;“特征”可以直观地理解为图像中易于识别并用于表示图像的独特或独特的部分。将特征视为图像中使其可区分的“地标”或“焦点”。为了使这一点更具关联性&#xff0c;请考虑一下您如…

EM32DX-C4【C#】站15

1外观&#xff1a; J301 直流 24V 电源输入 CAN0 CAN0 总线接口 CAN1 CAN1 总线接口 J201 IO 接线段子 S301-1、S301-2 输出口初始电平拨码设置 S301-3~S301-6 模块 CAN ID 站号拨码开关 S301-7 模块波特率拨码设置 S301-8 终端电阻选择开关 2DI&#xff1a; 公共端是…

stm32项目(11)——基于stm32的俄罗斯方块游戏机

1.功能设计 使用stm32f103zet6平台&#xff0c;以及一块LCD屏幕&#xff0c;实现了一个俄罗斯方块游戏机。可以用按键调整方块的位置、还可以控制方块下降的速度&#xff01; 2.视频演示 俄罗斯方块 3.俄罗斯方块发展史 俄罗斯方块是一种经典的拼图游戏&#xff0c;由苏联俄罗…

CoreDNS实战(二)-CoreDNS+ETCD实现DNS服务发现

1 引言 在前面的文章中讲了如何搭建一个内网的DNS服务&#xff0c;但是这里有个问题&#xff0c;mxsm-register.local表示局域网的注册中心域名&#xff0c;如果需要将每台部署了注册中心的IP地址写到CoreDNS的配置文件中。这样就需要每次都去修改 Corefile 配置文件。那有没有…

数据结构:链表应用:第6关:链表的分解

任务描述 本关任务&#xff1a;利用单链表A表示一个非零整数序列&#xff0c;把A分解为两个具有相同结构的链表B和C&#xff0c;其中B表的结点为A表中值小于零的结点&#xff0c;而C表的结点为A表中值大于零的结点。要求空间复杂度为O(1)&#xff0c;链表B和C均利用链表A的结点…

Perl | Multi-line Strings | Here Document

原文链接&#xff1a;https://www.geeksforgeeks.org/perl-multi-line-strings-here-document/ Multi-line string using Here Document Here Document is an alternative way for multiple print statements. A Here-Document can also be used for multi-line string. It d…

WordPress定时发布文章失败的原因及解决办法

WordPress的定时发布功能可以使我们能够提前准备好文章&#xff0c;并在特定的日期和时间自动发布。这样&#xff0c;可以根据内容计划和读者喜好来安排发布时间&#xff0c;而不必手动操作&#xff0c;在不方便操作的情况下实现内容的即时更新发布&#xff0c;这个功能还是非常…

Orvibo另款网关ViCenter-300的分析之二,系统分析

Vicenter300的分析,请上接之一 Orvibo另款网关ViCenter-300的分析之一的链接地址: Orvibo另款网关ViCenter-300的分析之一-CSDN博客 简单地看了一下硬件的组成部分,从中我们可以看出,Openwrt系统是嵌入式系统入门级的系统,也是一个很容易转换为产品的系统之一。 很多智…

【C语言】【二级】将所指字符串中所有下标为奇数位置上的字母转换成大写

题目 请编写一个函数fun,它的功能是:将ss所指字符串中所有下标为奇数位置上的字母转换成大写(若该位置上不是字母,则不转换)。 例如&#xff0c;若输入" abc4EFG",则应输出"aBc4EFG"。 考点 考点&#xff1a;指针、ASCII码、 数组和循环语句。 解法&#x…

分类预测 | Matlab实现OOA-CNN-SVM鱼鹰算法优化卷积支持向量机分类预测

分类预测 | Matlab实现OOA-CNN-SVM鱼鹰算法优化卷积支持向量机分类预测 目录 分类预测 | Matlab实现OOA-CNN-SVM鱼鹰算法优化卷积支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现OOA-CNN-SVM鱼鹰算法优化卷积支持向量机分类预测&#xff0…

设备制造行业CRM:提升客户满意度,驱动业务增长

设备制造行业客户需求多样化、服务链路长&#xff0c;企业在关注APS、EMS等工业软件之余还要以客户为中心&#xff0c;做好客户服务。设备制造行业CRM管理系统是企业管理客户关系的利器&#xff0c;设备制造行业CRM的作用有哪些&#xff1f;一文带您看懂。 设备制造行业需要解…

【LeetCode热题100】【双指针】接雨水

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] …

不同角度范围下四元数转欧拉角的方式

前言 在标定过程中求出的欧拉角与预设真值差距太大&#xff0c;检查中发现求出的角度与真值角度都可以将车辆坐标系变换到相机坐标系。后通过查阅文献&#xff0c;发现四元数对应的欧拉角并不唯一&#xff0c;在不同的条件下可求出不同的欧拉角&#xff0c;实际应用中需根据实…

java-快速入门篇

温馨提醒&#xff1a;概念固然重要&#xff0c;但通过概念下面的例子更容易理解并运用哦 文章目录 1. 基础语法1.1 变量与数据类型1.2 条件语句1.3 循环结构 2. 面向对象2.1 类与对象2.2 继承与多态 3. 集合框架3.1 列表&#xff08;List&#xff09;3.2集&#xff08;Set&…

【LeetCode】2629. 复合函数

复合函数 题目题解 题目 请你编写一个函数&#xff0c;它接收一个函数数组 [f1, f2, f3&#xff0c;…&#xff0c; fn] &#xff0c;并返回一个新的函数 fn &#xff0c;它是函数数组的 复合函数 。 [f(x)&#xff0c; g(x)&#xff0c; h(x)] 的 复合函数 为 fn(x) f(g(h(x…

提高软件代码质量的方法

提高软件代码质量是确保软件可维护性、稳定性和可扩展性的关键步骤。以下是一些建议&#xff0c;有助于提高软件代码质量&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.遵循编码规范&#xff1a; …

LangChain学习指南(二)——Retrieval

在上一章中&#xff0c;已经介绍了Langchain最最核心的module——model IO之后&#xff0c;本章继续介绍另一重要的模块Retrieval。 Retrieval这一模块在开发应用时也是至关重要的一部分&#xff0c;直接汉译过来即”检索“。该功能经常被应用于构建一个“私人的知识库”&…

Linux服务器超级实用的脚本

1.使用INOTIFYRSYNC自动实时同步数据 代码执行&#xff1a; bash inotify_rsyncs.sh &#xff1a;cat inotify_rsyncs.sh 脚本内容如下&#xff1a; #!bing/bash # Author: reyn #检测/data路径下的文件变化&#xff0c;排除Temp目录 INOTIFY_CMD"inotifywait -mrq -e …

网络程序设计

互相连接&#xff0c;发送信息 tcp和udp协议 tcp会有准备&#xff0c;udp不会准备。 8080端口&#xff1a;tomcat端口&#xff0c;java和web相连接 80端口&#xff1a;http 21端口&#xff1a;ftp 套接字 socket&#xff1a;提供给程序可以对外进行连接的接口 ip地址 特…