Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件

弹窗组件中自定义了表头增加了全屏,svg-icon 没有的话可能会报错,换成自己的图标就可以

<template><el-dialog:dialogHeight="dialogHeight":title="dialogTitle"class="dialog min-w-70"v-model="dialogVisible"append-to-body:modal="dialogModal":fullscreen="fullscreen":close-on-click-modal="dialogClickModalClose":draggable="dialogDraggable":show-close="false":width="dialogWidth":align-center="dialogAlignCenter":center="dialogContentCenter"@open="open"@close="close"><template #header><div class="flex justify-between items-content"><div class="titleClass">{{ dialogTitle }}</div><div class="icon-content"><!-- <el-icon class="single-uploader__icon text-[12px]"><i-ep-minus v-if="fullscreen" /><i-ep-plus v-else /></el-icon>--><div :title="!fullscreen ? '全屏' : '还原'"><svg-iconclass="icon-item-content"v-if="showExpand"@click="zoom":icon-class="fullscreen ? 'fullscreen-exit' : 'fullscreen'"/></div><div title="关闭"><el-iconv-if="showClose"@click="close"title="关闭"class="single-uploader__icon icon-item-content"><i-ep-close /></el-icon></div></div></div></template><div :style="{ height: dialogBodyHeight }" class="overflow-a0uto"><slot></slot></div><template #footer v-if="dialogFooterBtn"><el-button type="primary" @click="SaveSubmit">确 定</el-button><el-button @click="CloseSubmit">取 消</el-button></template></el-dialog>
</template>
<script setup lang="ts">
// 【接口】接受传参字段
interface IProps {// 是否显示 Dialogvisible: boolean;// 对话框的标题dialogTitle?: string;// 内容区域高度dialogHeight?: string;// 对话框的宽度dialogWidth?: string;// 是否需要遮罩层dialogModal?: boolean;// 是否水平垂直对齐对话框dialogAlignCenter?: boolean;// 是否让 Dialog 的 header 和 footer 部分居中排列dialogContentCenter?: boolean;// 是否可以通过点击 modal 关闭 DialogdialogClickModalClose?: boolean;// 为 Dialog 启用可拖拽功能dialogDraggable?: boolean;// 是否显示底部按钮dialogFooterBtn?: boolean;// 是否显示全屏按钮showExpand?: boolean;// 是否显示关闭按钮showClose?: boolean;
}// 初始化默认参数
const props = withDefaults(defineProps<IProps>(), {dialogTitle: "默认标题",dialogWidth: "40%",dialogHeight: "auto",dialogModal: true,dialogAlignCenter: false,dialogContentCenter: false,dialogClickModalClose: false,dialogDraggable: false,dialogFooterBtn: true,showExpand: false,showClose: true,
});const emit = defineEmits(["save","cancellation","open","close","zoom","update:visible",
]);const dialogVisible = useVModel(props, "visible", emit);
let fullscreen = ref(false);
const dialogBodyHeight = ref<string | number>(); // 初始值为字符串类型// watch监听
watch([() => props.visible, () => props.dialogHeight, () => props.dialogFooterBtn],() => {nextTick(() => {menuDialogZoom();});},{ deep: true, immediate: true }
);// 保存提交回调函数
const SaveSubmit = () => {emit("save"); //emit方法供父级组件调用
};// 取消保存回调函数
const CloseSubmit = () => {emit("cancellation"); //emit方法供父级组件调用
};// 打开事件回调函数
const open = () => {emit("open"); //emit方法供父级组件调用
};// 关闭事件回调函数(当显示头部关闭按钮时需调用该回调函数方法 -> dialogShowClose = true 反之)
const close = () => {emit("close"); //emit方法供父级组件调用
};// 缩放弹窗
const zoom = () => {fullscreen.value = !fullscreen.value;menuDialogZoom();console.log(fullscreen.value);emit("zoom", fullscreen.value); //emit方法供父级组件调用
};/* 分配权限缩放弹窗 */
const menuDialogZoom = () => {if (props.visible && fullscreen.value && props.dialogFooterBtn) {dialogBodyHeight.value = "calc(100vh - 120px)";} else if (props.visible && fullscreen.value && !props.dialogFooterBtn) {dialogBodyHeight.value = "calc(100vh - 80px)";} else {dialogBodyHeight.value = props.dialogHeight;}
};
</script>
<style scoped>
.titleClass {font-weight: bold;
}.icon-content {display: flex;align-items: center;
}.icon-item-content {display: flex;align-items: center;justify-content: center;color: #909399;
}.icon-item-content:nth-child(1) {margin-right: 10px;
}.icon-item-content:hover {color: #1f6feb;cursor: pointer;
}.single-uploader__icon {font-size: 18px;
}
</style>

使用案例

    <DialogdialogHeight="350px"v-model:visible="menuDialogVisible":dialogTitle="'【' + checkedRole.name + '】权限分配'":dialogDraggable="true"dialogWidth="30%"@close="menuDialogVisible = false"@save="handleRoleMenuSubmit"@cancellation="menuDialogVisible = false">内容区域</Dialog>

弹窗相关数据

let menuDialogVisible = ref(false);

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

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

相关文章

8 聚类算法

目录 0 背景 1 Kmeans 1.1 聚类数量k的确定 2 DBSCAN 2.1 三个点 2.2 算法流程 3 层次聚类 3.1 过程 4 基于分布的聚类:高斯混合模型 0 背景 聚类算法是一种无监督学习技术&#xff0c;用于将数据集中的数据点划分为不同的组或簇&#xff0c;使得同一组内的数据点彼此相…

nginx缓存清理

背景 昨天打开我的gpt镜像网站&#xff0c;意外发现静态图片资源全都无法获取了 CoCo-AI 一番排查下来&#xff0c;发现是引用的cdn链接失效了 且cdn源是属于七牛云的&#xff0c;且不再维护&#xff0c;于是果断切换到cloudflare export function getEmojiUrl(unified: str…

Qt简单离线音乐播放器

有上传本地音乐文件&#xff0c;播放&#xff0c;暂停&#xff0c;拖拉进度条等功能的播放器。 mainwindow.cpp #include "mainwindow.h" #include "ui_mainwindow.h" #include <QMediaPlayer> #include <QFileDialog> #include <QTime&g…

【Leetcode每日一题】 分治 - 排序数组(难度⭐⭐)(69)

1. 题目解析 题目链接&#xff1a;912. 排序数组 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 归并排序&#xff08;Merge Sort&#xff09;是一种采用“分而治之”&#xff08;Divide and Conquer&#xff09;策略…

Python 语音识别系列-实战学习-DFCNN_Transformer的实现

DFCNN_Transformer的实现 前言1.定义声学模型和获取数据的函数2.训练声学模型3.定义语言模型4.训练语言模型5.模型测试5.总结 前言 此博客是基于华为云中的DFCNN_Transformer的教程进行的学习和实践。本文将介绍一个结合了深度全卷积网络&#xff08;DFCNN&#xff09;和Trans…

stm32mp135d u-boot 引导流程

stm32mp135d u-boot 引导流程 一、U-Boot启动流程1. bootcmd_stm32mp 确定当前设备2. distro_bootcmd 进入当前设备启动3. bootcmd_mmc1 设置当前设备号4. mmc_boot 设置当前设备类型5. scan_dev_for_boot_part 扫描设备分区6. scan_dev_for_boot 扫描指定分区7. scan_dev_for_…

Elasticsearch索引定义

1. 前言 索引是具有相同结构的文档的集合&#xff0c;每个索引都拥有一个唯一的索引名称&#xff0c;它是ES里面非常重要的概念。一个ES集群中可以有多个索引&#xff0c;不同的索引代表不同的业务类型数据。 什么时候需要创建新的索引呢&#xff1f;一般来说有两类场景&…

数字电路-5路呼叫显示和8路抢答器

本内容涉及两个电路&#xff0c;分别为5路呼叫显示电路和8路抢答器电路&#xff0c;包含Multisim仿真原文件&#xff0c;为掌握FPGA做个铺垫。紫色文字是超链接&#xff0c;点击自动跳转至相关博文。持续更新&#xff0c;原创不易&#xff01; 目录&#xff1a; 一、5路呼叫显…

【百度Apollo】探索自动驾驶:百度Apollo视觉感知模块的实践与创新

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、百度Apollo视觉感知模块概述二、启动感知模块步骤一&#xff1a;进入 Docker 环境并启动 Dreamview步骤二…

HOOPS Exchange导入数据时如何使用CATIA缓存选项?

1、什么是CATIA缓存选项和CGR文件&#xff1f; CATIA V5默认的工作方式是加载几何图形。加载大型程序集时&#xff0c;这可能会导致性能下降&#xff0c;因为所需的内存很重要。 在这种情况下&#xff0c;我们可能需要使用缓存选项。这将生成仅包含曲面细分数据而不包含几何图…

Docker容器---docker-Consul部署

一、Docker-consul简介 1、概述 consul是google开源的一个使用go语言开发的服务管理软件。支持多数据中心、分布式高可用的、服务发现和配置共享。采用Raft算法&#xff0c;用来保证服务的高可用。内置了服务注册与发现框架、分布一致性协议实现、健康检查、Key/Value存储、多…

【Hadoop】-Hive客户端:HiveServer2 Beeline 与DataGrip DBeaver[14]

HiveServer2 & Beeline 一、HiveServer2服务 在启动Hive的时候&#xff0c;除了必备的Metastore服务外&#xff0c;我们前面提过有2种方式使用Hive&#xff1a; 方式1&#xff1a; bin/hive 即Hive的Shell客户端&#xff0c;可以直接写SQL方式2&#xff1a; bin/hive --…

绕过Windows 11的安装门槛

&#x1f9d0; Win11安装门槛 自从Win11发布以来&#xff0c;微软提高了对电脑配置的要求&#xff0c;如TPM支持、特定CPU型号限制等&#xff0c;让不少小伙伴的升级之路变得坎坷。不过&#xff0c;俗话说得好&#xff0c;道高一尺魔高一丈&#xff0c;今天就让我们一起来看看…

大语言模型与词向量表示

大语言模型&#xff08;Large Language Models, LLMs&#xff09;与词向量表示之间的关系是紧密相连的。以下是几个关键点&#xff0c;说明了它们之间的联系&#xff1a; 1. 高质量词向量的生成 大语言模型能够生成高质量的词向量表示。这些模型通过在大量文本数据上的预训练学…

ES基础查询,term级参数介绍

Term级别查询 term这个单词汉语翻译是术语、条款等意思&#xff0c;在es中翻译过来我总感觉怪怪的。es官网将ids、term、terms、fuzzy等查询方式放在这个分类下&#xff0c;他们是dsl语句中最基本的语句&#xff0c;大都是单条件查询。其中ids、esists、range、term、terms等查…

MongoDB聚合运算符:$strLenCP

MongoDB聚合运算符&#xff1a;$strLenCP $strLenCP聚合运算符返回指定字符串中 UTF-8 代码点的数量。 语法 { $strLenCP: <string expression> }<expression>为可解析为字符串的表达式&#xff0c;如果解析为null或引用了不存在的字段&#xff0c;返回错误。 …

二,网络安全常用术语

黑客&#xff08;hacker&#xff09;——对计算机技术非常擅长的人&#xff0c;窃取数据&#xff0c;破坏计算机系统&#xff1b;全球最知名的一个黑客组织匿名&#xff08;Anonymous&#xff09;。 脚本小子——刚刚入门安全行业&#xff0c;学习了一些技术&#xff0c;只会用…

美国天然气期货价格因高库存水平和天气预报因素下跌

近期&#xff0c;美国天然气期货价格出现下跌&#xff0c;主要原因是高库存水平继续对价格形成压力。纽约商品交易所(NYMEX)的天然气期货价格收跌2.4美分&#xff0c;至每百万英热1.614美元&#xff0c;跌幅为1.5%。这一价格下跌反映了天然气市场受多种因素影响的复杂局面。 库…

完美解决AttributeError: module ‘backend_interagg‘ has no attribute ‘FigureCanvas‘

遇到这种错误通常是因为matplotlib的后端配置问题。在某些环境中&#xff0c;尤其是在某些特定的IDE或Jupyter Notebook环境中&#xff0c;可能会因为后端配置不正确而导致错误。错误信息提示 module backend_interagg has no attribute FigureCanvas 意味着当前matplotlib的后…

数智新重庆 | 推进信号升格 打造算力山城

2024年&#xff0c;是实现“十四五”规划目标任务的关键一年&#xff0c;高质量的5G网络、强大的AI能力作为新质生产力的重要组成部分&#xff0c;将有效赋能包括制造业在内的千行万业数字化化、智能化、绿色化转型升级&#xff0c;推动融合应用新业态、新模式蓬勃兴起&#xf…