二次封装 el-dialog 实现 全屏和最小化 功能

效果

在这里插入图片描述

封装后的组件

 <template><el-dialog v-model="dialogVisible" :show-close="false" :fullscreen="fullscreen" draggable overflow><template #header="{ close }"><div><span style="font-weight: bolder">{{ title0 }}</span><el-icon style="cursor: pointer; float: right" @click="close"><Close /></el-icon><el-icon style="cursor: pointer; float: right; margin-right: 8px" @click="fullScreenFun"><FullScreen /></el-icon><el-icon style="cursor: pointer; float: right; margin-right: 8px" @click="close"><Minus /></el-icon></div></template><slot>默认内容</slot><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submit"> 确定 </el-button></template></el-dialog>
</template><script setup lang="tsx" name="assignRoleDialog">
import { ref } from "vue";
// 标题
const title0 = ref("默认标题");
//弹窗是否显示
const dialogVisible = ref(false);
//是否全屏
const fullscreen = ref(false);//打开对话框
const openDialog = (title: string) => {title0.value = title;dialogVisible.value = true;
};
//关闭对话框
const closeDilog = () => {dialogVisible.value = false;
};const fullScreenFun = () => {fullscreen.value = !fullscreen.value;
};const emits = defineEmits(["fun"]);
const submit = () => {emits("fun");
};defineExpose({openDialog,closeDilog
});
</script>

页面中使用

<template><el-button @click="openDialogFun">haaha</el-button><FullScreenDialog ref="hdialog" @fun="dfun"><el-scrollbar max-height="800px"><h2>111111</h2><h2>111111</h2><!-- <h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2> --></el-scrollbar></FullScreenDialog>
</template>
<script lant=ts>
import FullScreenDialog from "@/components/FullScreenDialog/index.vue";
const hdialog = ref();const openDialogFun = () => {hdialog.value!.openDialog("修改用户");
};
const dfun = () => {alert("执行业务代码……");hdialog.value.closeDilog();
};
</script>

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

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

相关文章

图像增强及运算篇之图像掩膜直方图和HS直方图

一.图像掩膜直方图 如果要统计图像的某一部分直方图&#xff0c;就需要使用掩码&#xff08;蒙板&#xff09;来进行计算。假设将要统计的部分设置为白色&#xff0c;其余部分设置为黑色&#xff0c;然后使用该掩膜进行直方图绘制&#xff0c;其完整代码如下所示。 # -*- codi…

OurBMC运营委员会2024年上半年度例会顺利召开

6 月 27 日&#xff0c;OurBMC 社区运营委员会 2024 年上半年度例会顺利召开。本次会议采用线上线下结合的方式&#xff0c;各委员在会上听取了 2024 年上半年社区运营委员会的工作总结汇报&#xff0c;并规划了下半年运营重点工作&#xff0c;同时针对社区活动改进、运营规划开…

【OpenSSH】关于操作系统中的自带的SSH你知道怎么用吗

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、如何开启SSH服务2.1 什么是OpenSSH2.2 对于Windows 10, Windows 11系统2.2.1 如…

车载测试工程师在行业中有哪些挑战需要面对?

车载测试工程师在行业中面临着多方面的挑战&#xff0c;这些挑战涵盖了技术、安全、法规以及市场环境等多个层面。 1. 技术挑战&#xff1a; 复杂性与集成性&#xff1a;现代汽车系统由众多模块和子系统组成&#xff0c;包括发动机控制、安全系统、娱乐系统、导航系统等。这些系…

【C++】————类和对象(上)

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年6月21日 一、类与对象的初步认识 1、类其实就是对对象的抽象&#xff0c;而对象就是对类的具体实例 类不占用内存&#xff0c;而对象占用内存。 2、面向对象与面向过程 C语言是面…

【03】从0到1构建AI生成思维导图应用 -- Agent 搭建

【03】从0到1构建AI生成思维导图应用 – Agent 搭建 大家好&#xff01;最近自己做了一个完全免费的AI生成思维导图的网站&#xff0c;支持下载&#xff0c;编辑和对接微信公众号&#xff0c;可以在这里体验&#xff1a;https://lt2mind.zeabur.app/ 上一章&#xff1a;https…

备忘录标签怎么弄 备忘录标签设置方法

在繁忙的生活中&#xff0c;我们常常需要记录各种琐事、工作任务和灵感闪现。备忘录成了我们不可或缺的助手&#xff0c;但随着时间的推移&#xff0c;备忘录里的内容越来越多&#xff0c;如何高效地管理和查找这些信息成了一个大问题。这时&#xff0c;备忘录的标签功能就显得…

vxe-vxeTable使用vxe-colgroup分组合并表头,基础上合并

1.例 vxe-colgroup分组完成&#xff0c;需要实现两个合并合并成一行 基础合并完成 2.实现思路 由于表头字段固定&#xff0c;在进行vxe-colgroup分组合并&#xff0c;实现基础的表头合并&#xff1b;组件库官网对于表头合并并没有方法&#xff1b; 1.官网API知可以给对应的表…

新能源电燃灶:变革与优势

在当今社会&#xff0c;能源问题日益凸显&#xff0c;能源危机成为了全球关注的焦点。而在厨房领域&#xff0c;一种名为新能源电燃灶的产品正逐渐走进人们的视野&#xff0c;以华火电燃灶为例&#xff0c;它展现出了令人瞩目的特点和潜力。 随着传统能源的逐渐枯竭和环境压力的…

智芯开发板----环境配置

一、软件准备 Keil IDE/ IAR IdeSupport_Install_Package已经上传到资源中自行下载即可。 二、IAR环境配置 1.首先将IdeSupport_Install_Package内的IAR文件复制到你的IAR安装路径中如图所示&#xff1a; 2.按如图所示的路径进行复制即可 3.以记事本的方式打开这个xml文件…

零基础STM32单片机编程入门(四)ADC详解及实战含源码视频

文章目录 一.概要二.STM32F103C8T6单片机ADC外设特点三.STM32单片机ADC内部结构图1.ADC相关引脚说明2.ADC通道分类3.触发源4.转换周期5.电压转换计算6.更精确电压转换计算 四.规则通道ADC采集信号流向1.单次转换模式2.连续转换模式 五.CubeMX配置一个ADC采集例程六.CubeMX工程源…

大厂程序员上班猝死成常态?

大家好&#xff0c;我是瑶琴呀&#xff0c;拥有一头黑长直秀发的女程序员。 近日&#xff0c;连续看到大厂程序员猝死、低血糖晕倒的新闻&#xff0c;同为程序员感到很难受。互联网加班成常态这是既定事实&#xff0c;尤其在这个内卷严重、经济不景气的环境中&#xff0c;加班…

【漏洞复现】电信网关配置管理系统——命令执行

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 电信网关配置管理系统是一个用于管理和配置电信网关设备的软件系…

高性能Web服务器-Nginx的常用模块

文章目录 Nginx安装Nginx平滑升级与回滚平滑升级流程第1步&#xff0c;下载新版本第2步&#xff0c;编译第3步&#xff0c;执行make第4步&#xff0c;对比新旧版本第5步&#xff0c;备份旧nginx二进制文件第6步&#xff0c;模拟用户正在访问nginx第7步&#xff0c;替换旧的ngin…

【资源】太绝了!整整16本Python必看书籍详细讲解,适合零基础小白,高清电子版PDF开放下载,带你从入门到入土~

小编为初学Python的朋友们汇总了16本零基础入门书籍&#xff0c;包括Python三剑客等&#xff0c;都是在编程届多年畅销的书籍&#xff0c;也是众多从业者的选择&#xff0c;全文详细介绍了书籍主要内容&#xff0c;有需要的宝子根据自身情况自取 【教程领取方式在文末&#xff…

基于weixin小程序农场驿站系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;农场资讯管理&#xff0c;用户管理&#xff0c;卖家管理&#xff0c;用户分享管理&#xff0c;分享类型管理&#xff0c;商品信息管理&#xff0c;商品类型管理 开发系统&#xff1a;Windows 架构模式…

「性能指标」CPU飙高排查实战

上篇提到了什么是 CPU 以及如何计算的。接下来主要说说实际工作中遇到 CPU 飙高如何去排查呢&#xff1f; 往期回顾&#xff1a; 聊聊性能指标 CPU 利用率如何计算的&#xff1f; 问题发现 前段时间我们新上线了一个应用&#xff0c;由于流量一直不大&#xff0c;集群的每秒…

力扣 单链表元素删除解析及高频面试题

目录 删除元素的万能方法 构造虚拟头结点来应对删除链表头结点的情况 一、203.移除链表元素 题目 题解 二、19.删除链表中倒数第K个节点 题目 题解 三、 83.删除某个升序链表中的重复元素&#xff0c;使重复的元素都只出现一次 题目 题解 82.删除某个升序链表中的…

2023年第十四届蓝桥杯JavaB组省赛真题及全部解析(下)

承接上文&#xff1a;2023年第十四届蓝桥杯JavaB组省赛真题及全部解析&#xff08;下&#xff09;。 目录 七、试题 G&#xff1a;买二赠一 八、试题 H&#xff1a;合并石子 九、试题 I&#xff1a;最大开支 十、试题 J&#xff1a;魔法阵 题目来自&#xff1a;蓝桥杯官网…

【星海随笔】vue+vite

开头问一个问题&#xff0c;我发现有的人粉丝是点赞数的好几倍&#xff0c;可能和必须关注他才能阅读他的文章有关。 所以问一下怎么设置为关注才能查看该文章。 screen -ls #查看 id 列表 screen -S <session_name> # 创建一个会话 screen -R <session_id> # 根据…