当前位置: 首页 > news >正文

自定义element-plus的弹框样式

项目中弹框使用频繁,需要统一样式风格,此组件可以自定义弹框的头部样式和内容

一、文件结构如下:
 

 

 二、自定义myDialog组件

需求:

1.自定义弹框头部背景样式和文字

2.自定义弹框内容

3.基本业务流程框架

components/myDialog/index.vue完整代码:

<template><div class="system-user-dialog-container"><el-dialog center align-center v-model="state.isShow" width="769px" @close="dialogRefresh"><template #header="{ titleClass }"><div :class="titleClass">{{ state.title }}</div></template><el-form ref="formRef" :rules="state.rules" :model="state.formData" size="default" label-width="100px"><slot name="formPart"><div>表单内容</div></slot></el-form><template #footer><span class="dialog-footer"><el-button @click="onCancel" size="default">取 消</el-button><el-button type="primary" @click="onSubmit(formRef)" size="default">确认</el-button></span></template></el-dialog></div>
</template><script setup lang="ts" name="myDialog">
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';// 定义变量内容
const formRef = ref();// 定义子组件向父组件传值/事件
const emit = defineEmits(['doSend']);const state: any = reactive({isShow: false,formData: [],title: '',rules: {},
});// 取消
const onCancel = () => {state.isShow = false;
};// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {if (!formEl) return;//表格验证await formEl.validate(async (valid: any, fields: any) => {if (valid) {emit('doSend');} else {ElMessage.warning('表格项验证失败,请检查');console.log('表格项验证失败!', fields);}});onCancel();
};const dialogRefresh = () => {// 清除校验规则formRef.value?.resetFields();// 重置表单内容state.formData = [];
};/**   formData:表单数据*   title:标题*   rules:表单校验规则*/
const openDialog = (formData: object, title: string, rules: object) => {state.isShow = true;state.formData = formData;state.title = title;state.rules = rules;
};// 暴露变量
defineExpose({openDialog,
});
</script>
<style scoped lang="scss">
:deep .el-dialog__header {width: 100%;height: 60px;background-color: #5e8dff;
}:deep .el-dialog__header .el-dialog__title {font-size: 20px;color: #fff;
}:deep .el-dialog__header .el-dialog__close {color: #fff;
}
</style>

三、使用组件

实现方法:

1.通过插槽自定义弹框中的表单内容

2.父子组件传值

3.ref直接获取dom

 dialogDemo/dialog.vue完整代码:

<template><div class="system-dic-dialog-container"><myDialog ref="myDialogRef" @doSend="handleOperate"><template #formPart><div>自定义表单内容</div></template></myDialog></div>
</template><script setup lang="ts" name="systemDicDialog">
import myDialog from '/@/components/myDialog/index.vue';
import { reactive, ref } from 'vue';// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);// 定义变量内容
const myDialogRef = ref();
const state = reactive({data: [],title: '',isAdd: false,rules: {// area: [{ required: true, message: '请选择区域', trigger: 'blur' }],// alarmValueName: [{ required: true, message: '请输入告警值名称', trigger: 'blur' }],// alarmValue: [{ required: true, message: '请输入告警值', trigger: 'blur' }],// alarmValueUnit: [{ required: true, message: '请选择告警值单位', trigger: 'blur' }],// alarmText: [{ required: true, message: '请输入告警提示语', trigger: 'blur' }],},dialog: {isShowDialog: false,type: '',title: '',submitTxt: '',},
});const openDialog = (row: any) => {console.log(row, 'row');console.log(state.data, 'data');if (row) {state.title = '修改';state.isAdd = false;} else {state.title = '新增';state.isAdd = true;}myDialogRef.value.openDialog(state.data, state.title, state.rules);
};// 发请求
const handleOperate = () => {console.log('校验成功');state.isAdd ? doAdd() : doEdit();
};// 添加
const doAdd = () => {console.log('doAdd');clearFormData();emit('refresh');
};
// 修改
const doEdit = () => {console.log('doEdit');clearFormData();emit('refresh');
};// 清空表单信息
const clearFormData = () => {state.data = [];
};// 暴露变量
defineExpose({openDialog,
});
</script>

添加或编辑成功后,刷新页面

  dialogDemo/index.vue完整代码:

<template><div class="notice-bar-container layout-pd"><el-button type="success" @click="handleOpenDialog">点我打开弹框</el-button><openDialog ref="openDialogRef" @refresh="handleRefresh"></openDialog></div>
</template>
<script setup lang="ts" name="makeDialogDemo">
import openDialog from './dialog.vue';
import { ref } from 'vue';const openDialogRef = ref();const handleOpenDialog = () => {openDialogRef.value.openDialog();
};// 刷新页面
const handleRefresh = () => {};
</script>
<style lang="scss" scoped></style>

 

相关文章:

自定义element-plus的弹框样式

项目中弹框使用频繁,需要统一样式风格,此组件可以自定义弹框的头部样式和内容 一、文件结构如下: 二、自定义myDialog组件 需求&#xff1a; 1.自定义弹框头部背景样式和文字 2.自定义弹框内容 3.基本业务流程框架 components/myDialog/index.vue完整代码&#xff1a; &…...

Linux:iptables防火墙

目录 绪论 1、防火墙 1.1 保护范围 1.2 网络协议划分 1.3 协议&#xff1a;tcp 1.4 四表 1.5 五链 1.6 iptables的规则 1.7 匹配顺序 流入本机&#xff1a;prerouting ------->iuput---------->用户进程(httpd服务)------请求--------响应--------->数据要返…...

MongoDB文档-进阶使用-spring-boot整合使用MongoDB---MongoTemplate完成增删改查

传送门&#xff1a; MongoDB文档--基本概念_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装&#xff08;mongodb环境搭建&#xff09;-docker安装&#xff08;挂载数据卷&#xff09;-以及详细版本对比_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装&…...

设计模式十四:责任链模式(Chain of Responsibility Pattern)

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许你将请求沿着处理者链进行传递&#xff0c;直到有一个处理者能够处理该请求。 在责任链模式中&#xff0c;多个处理者对象被连接成一个链。当接收到一个请求时&#xf…...

将商城项目放到docker-centos7中

1、docker pull centos:7 2、docker run -d -it --privileged 仓库名称/shopcentos:1.1 /usr/sbin/init 注意&#xff1a; /usr/sbin/init 必须加&#xff0c;否则没法使用systemctl启动mysql 3、安装mysql教程 安装msyql教程&#xff1a;https://blog.csdn.net/davice_li…...

C# Winform 自动获取 软件版本号

C# Winform如何自动获取版本号 方案一 缺点是不适配&#xff0c;clickones发布的版本 public static string GetVersion() {try {return System.Deployment.Application.ApplicationDeployment.CurrentDeployment.CurrentVersion.ToString();}catch{return System.Ref…...

基于C++实现了最小反馈弧集问题的三种近似算法(GreedyFAS、SortFAS、PageRankFAS)

该项目是一个基于链式前向星存图、boost&#xff08;boost::hash、asio线程池&#xff09;以及emhash7/8的非官方实现&#xff0c;实现了最小反馈弧集问题的三种近似算法。该问题是在有向图中找到最小的反馈弧集&#xff0c;其中反馈弧集是指一组弧&#xff0c;使得从这些反馈弧…...

奶牛用餐 优先队列 java

&#x1f468;‍&#x1f3eb; 奶牛用餐 约翰的农场有 n n n 头奶牛&#xff0c;编号 1 s i m n 1 \\sim n 1simn。 每天奶牛们都要去食堂用餐。 食堂一共有 k k k 个座位&#xff0c;也就是说同一时间最多可以容纳 k k k 头奶牛同时用餐。 已知&#xff0c;第 i i i …...

包管理机制pip3

pip3 安装pip3 安装pip3 apt install python3-pip yum install python3-pip从仓库出发的命令 查询仓库信息 // 获取默认pip3源 pip3 config get global.index-url查询所有软件包 查询已经安装的所有软件包 pip3 list从软件包出发的命令 从软件包名出发查询其他信息 查询…...

liunx在线安装tomcat

1、在线安装 https://dlcdn.apache.org/tomcat/tomcat-8/v8.5.91/bin/apache-tomcat-8.5.91.tar.gz 执行&#xff1a;wget --no-check-certificate https://dlcdn.apache.org/tomcat/tomcat-8/v8.5.91/bin/apache-tomcat-8.5.91.tar.gz ps:或者直接把tar.gz扔服务器 2、 编…...

导入示例工程出现error: failed to start ability. Error while Launching activity错误的解决办法

导入华为健康生活应用&#xff08;ArkTS&#xff09;&#xff0c;使用DevEco Studio打开&#xff0c;运行报错&#xff1a; error: failed to start ability. Error while Launching activity解决办法&#xff1a;修改module.json5里面exported的值&#xff0c;由false改为tr…...

【深入了解PyTorch】PyTorch分布式训练:多GPU、数据并行与模型并行

【深入了解PyTorch】PyTorch分布式训练:多GPU、数据并行与模型并行 PyTorch分布式训练:多GPU、数据并行与模型并行1. 分布式训练简介2. 多GPU训练3. 数据并行4. 模型并行5. 总结PyTorch分布式训练:多GPU、数据并行与模型并行 在深度学习领域,模型的复杂性和数据集的巨大规…...

linux 下 网卡命名改名

Linux 操作系统的网卡设备的传统命名方式是 eth0、eth1、eth2等&#xff0c;而 CentOS7 提供了不同的命名规则&#xff0c;默认是网卡命名会根据网卡的硬件信息&#xff0c;插槽位置等有关&#xff1b;来分配。这样做的优点是命名全自动的、可预知的&#xff0c;缺点是比 eth0、…...

6.2.0在线编辑:GrapeCity Documents for Word (GcWord) Crack

GrapeCity Word 文档 (GcWord) 支持 Office Math 函数以及转换为 MathML GcWord 现在支持在 Word 文档中创建和编辑 Office Math 内容。GcWord 中的 OMath 支持包括完整的 API&#xff0c;可处理科学、数学和通用 Word 文档中广泛使用的数学符号、公式和方程。以下是通过 OMa…...

为什么需要智能指针?

为什么需要智能指针&#xff1f; 解决忘记释放内存导致内存泄漏的问题。解决异常安全问题。 #include<iostream> using namespace std;int div() {int a, b;cin >> a >> b;if (b 0)throw invalid_argument("除0错误");return a / b; } void Func(…...

《华为认证》L2TP VPN配置

配置接口ip地址&#xff0c;并且将防火墙的接口加入对应的安全区域 。 LNS的G1/0/0 IP为202.1.1.1 1、配置LNS的缺省路由&#xff1a; ip route-static 0.0.0.0 0.0.0.0 202.1.1.2 2、通过WEB 界面配置防火墙的 L2TP VPN 浏览器输入&#xff1a; https://202.1.1.1:8443/def…...

【JVM】JVM垃圾收集器

文章目录 什么是JVM垃圾收集器四种垃圾收集器&#xff08;按类型分&#xff09;1.串行垃圾收集器(效率低&#xff09;2.并行垃圾收集器(JDK8默认使用此垃圾回收器&#xff09;3.CMS&#xff08;并发&#xff09;垃圾收集器(只针对老年代垃圾回收的&#xff09; 什么是JVM垃圾收…...

StarGANv2: Diverse Image Synthesis for Multiple Domains论文解读及实现(一)

StarGAN v2: Diverse Image Synthesis for Multiple Domainsp github:https://github.com/clovaai/stargan-v2 1 模型架构 模型主要架构由四部分组成 ①Generator、②Mapping network、③Style encoder、④Discriminator Generator&#xff1a;G网络 生成模型G将输入图片x转换…...

Go Gin 中使用 JWT

一、JWT JWT全称JSON Web Token是一种跨域认证解决方案&#xff0c;属于一个开放的标准&#xff0c;它规定了一种Token实现方式&#xff0c;目前多用于前后端分离项目和OAuth2.0业务场景下。 二、为什么要用在你的Gin中使用JWT 传统的Cookie-Sesson模式占用服务器内存, 拓展性…...

AWS中Lambda集成SNS

1.创建Lambda 在Lambda中&#xff0c;创建名为AWSSNSDemo的函数 use strict console.log(loading function); var aws require(aws-sdk); var docClient new aws.DynamoDB.DocumentClient(); aws.config.regionap-southeast-1;exports.handler function(event,context,cal…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...