基于ElementUI二次封装弹窗组件

效果:

基于elementui弹窗的二次封装

一、自定义内容类型弹窗

<!-- title:对话框的标题confirmLoading:当前是否处于提交中titleCenter:对话框标题居中方式footerCenter:底部按钮的对其方式visible:是否显示弹窗width:设置对话框的宽度beforeClose:允许您指定在对话框关闭之前将调用的函数closeOnClickModal:确定单击对话框外部(在模态叠加层上)是否会关闭对话框center:控制对话框是否在屏幕中央customClass:允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框showFooter:确定是否显示带有“取消”和“确认”按钮的默认页脚-->
<template><el-dialog:visible.sync="dialogVisible":width="width":before-close="handleBeforeClose":close-on-click-modal="closeOnClickModal":center="center":custom-class="customClass":show-close="false"><divslot="title":style="{'textAlign': titleCenter,'font-size':'16px','font-weight':'bold'}"><span>{{title}}</span></div><slot></slot><div slot="footer" v-if="showFooter" :style="{'text-align': footerCenter}" class="dialog-footer"><el-button class="cancel-btn" @click="handleCancel" size="small">取消</el-button><el-button class="primary-btn" type="primary"  :loading="confirmLoading" @click="handleConfirm" size="small">{{ confirmLoading ? "提交中" : "确  定" }}</el-button></div></el-dialog>
</template><script>
export default {name:"hsk-dialog",props: {title: { //对话框的标题type: String,default: "",},confirmLoading:{  //当前是否处于提交中type: Boolean,default: false,},titleCenter:{  //对话框标题居中方式type: String,default: "center",},footerCenter:{ //底部按钮的对其方式type: String,default: "center",},visible: { //是否显示弹窗type: Boolean,default: false,},width: { //设置对话框的宽度type: String,default: "400px",},beforeClose: { //允许您指定在对话框关闭之前将调用的函数type: Function,default: null,},closeOnClickModal: { //确定单击对话框外部(在模态叠加层上)是否会关闭对话框type: Boolean,default: true,},center: { //控制对话框是否在屏幕中央 ( true) 或不在屏幕中央 ( false)。type: Boolean,default: true,},customClass: {  //允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框type: String,default: "",},showFooter: { //确定是否显示带有“取消”和“确认”按钮的默认页脚type: Boolean,default: true,},},data() {return {dialogVisible: this.visible,};},watch: {visible(newValue) {this.dialogVisible = newValue;},dialogVisible(newValue) {this.$emit("update:visible", newValue);},},methods: {handleBeforeClose(done) {if (this.beforeClose) {this.beforeClose(done);} else {done();}},handleCancel() {// this.$emit('update:visible', false);this.dialogVisible = false;this.$emit("cancel");},handleConfirm() {if (!this.confirmLoading) {// this.dialogVisible = false;this.$emit("confirm");}},},
};
</script><style scoped>
/* Add your custom styles here *//deep/.el-dialog__body{padding: 30px 55px !important;
}
.dialog-footer {text-align: right;margin-top: 10px;
}
.el-openDialog__header {margin-bottom: 10px;
}
.el-dialog__footer{margin-bottom: 31px;
}
.cancel-btn{width: 80px;height: 36px;background: #FFFFFF;border-radius: 2px 2px 2px 2px;opacity: 1;box-sizing: border-box;border: 1px solid #707070;
}
.primary-btn{margin-left:20px;width: 80px;height: 36px;background: #0759C4;box-sizing: border-box;border-radius: 2px 2px 2px 2px;
}
</style>

父组件使用

<template><div><el-button type="text" @click="openDialog">弹出窗口</el-button><!-- <el-button @click="openDialog">打开对话框</el-button> --><hsk-dialog:visible.sync="dialogVisible"title="自定义对话框":width="width":before-close="beforeCloseHandler":close-on-click-modal="false":center="false":showFooter="true"custom-class="custom-dialog":show-footer="false"@confirm="handleConfirm"@cancel="handleCancel":confirm-loading="confirmLoading">自定义内容及表单</hsk-dialog></div>
</template><script>
export default {components: {// hskDialog},data() {return {confirmLoading: false,dialogVisible: false,width: "400px",};},methods: {openDialog() {this.dialogVisible = true;},beforeCloseHandler(done) {this.$message.info("点击了“X”操作");done();},handleConfirm() {// this.$message.success('点击了确定按钮');this.confirmLoading = true;this.$message.success("点击了确定按钮");setTimeout(() => {this.confirmLoading = false;}, 1000);},handleCancel() {this.$message.info("点击了取消按钮");}},
};
</script>
<style>
.a {text-align: left;margin-top: 0;
}
.codebox{line-height: 24px;
}
</style>

二、删除提示类型弹窗封装

/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
import {MessageBox} from "element-ui"
import "./styles/pop-up.css"
export function hskMsgbox (h, title,value,iconClass='',iconColor='') {const newDatas = [];const confirmText = Array.isArray(value) ? [...value] : [value];if(value.length===1){newDatas.push(h('i', { class: iconClass,style:'color:'+iconColor+';float: left;margin-right:5px;font-size:24px;'}),h('div', { style: 'padding-left:-6px;text-align: left;font-size: 14px;font-weight:bold;' }, confirmText[0]));}else{for (const i in confirmText) {if(i==='0'){newDatas.push(h('div', { class: iconClass,style:'color:'+iconColor+';float: left;margin-right:5px;font-size:24px;'}),h('div', { style: 'padding-left:-6px;text-align: left;font-size: 14px;font-weight:bold;' }, confirmText[i]));}else{newDatas.push(h('div', { style: 'padding-left:-6px;text-align: left;font-size: 12px' }, confirmText[i] ));}}}const promiseconfirm = new Promise((resolve, reject) => {MessageBox.confirm('Tip', {title: title,message:h('p', {style:"text-align: left;"}, [newDatas]), showCancelButton: true,confirmButtonText: "确定",cancelButtonText: "取消",center: true}).then(() => {resolve(true)}).catch(() => {resolve(false)})})return promiseconfirm
}

删除提示类型弹窗样式文件

.el-message-box__title {text-align: center;font-size: 16px;font-weight: bold;
}
.el-message-box__header{padding-bottom: 6px !important;padding-top: 23px !important;
}
.el-message-box--center{padding-bottom:25px !important;
}

父组件使用

<template><div><el-button type="text" @click="deleteClick">删除样式一</el-button><br /><el-button type="text" @click="deleteClick2">删除样式二</el-button><br /><el-button type="text" @click="deleteClick3">删除样式三</el-button><br /><el-button type="text" @click="deleteClick4">删除样式四</el-button></div>
</template><script>
import { hskMsgbox } from "@/package/commonUtils.js";
export default {components: {},data() {return {};},methods: {//删除async deleteClick() {// confirmANewlineconst h = this.$createElement;// let abc = 11let confirmText1 = [`是否删除数据字典?`,// `删除后,数据无法找回,请谨慎操作。`,];let a = await hskMsgbox(h,"删除数据字典",confirmText1);console.log("a", a);},//删除样式二async deleteClick2() {// confirmANewlineconst h = this.$createElement;// let abc = 11let confirmText1 = [`是否删除数据字典?`,`删除后,数据无法找回,请谨慎操作。`,];let a = await hskMsgbox(h,"删除数据字典",confirmText1);console.log("a", a);},async deleteClick3() {// confirmANewlineconst h = this.$createElement;// let abc = 11let confirmText1 = [`是否删除数据字典?`,];let a = await hskMsgbox(h,"删除数据字典",confirmText1,"el-icon-warning","red");console.log("a", a);},async deleteClick4() {// confirmANewlineconst h = this.$createElement;// let abc = 11let confirmText1 = [`是否删除数据字典?`,`删除后,数据无法找回,请谨慎操作。`,];let a = await this.hskMsgbox(h,"删除角色",confirmText1,"el-icon-warning","#E6A23C");console.log("a", a);},},
};
</script>
<style>
</style>

提示弹窗取消和确认返回的是true和false

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

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

相关文章

JavaScript:正则表达式

JavaScript&#xff1a;正则表达式 什么是正则表达式正则表达式语法定义正则表达式判断是否有匹配的字符串查找匹配的字符串 正则表达式匹配法则元字符边界符量词字符类 什么是正则表达式 正则表达式用于匹配字符串中字符的组合模式。 正则表达式会依据其自身语法&#xff0c;…

2023 搞懂git 工作目录---暂存区---本地仓库---版本库

最近了解了下git的底层原理&#xff08;大神录制的视频放在最下方&#xff09;&#xff0c;记录下&#xff1a; 工作区 就是存放待提交文件的目录&#xff08;下图图解标注&#xff09;比如pyhon_test目录暂存区 .git目录下的index文件 对应的指令 git add本地仓库 .gi…

【操作系统】测试五

文章目录 单选题填空题 单选题 可以实现虚拟存储器的方案是。 【正确答案&#xff1a;D】 A. 固定分区方式 B. 可变分区方式 C. 纯分页方式 D. 请求页式 哪种设备属于字符设备&#xff1f; 【 正确答案&#xff1a;D】 A. 磁盘 B. 磁带 C. 光盘 D. 键盘 哪种设备属于块设备&a…

图片格式 WebP、JPEG、PNG、SVG 及转换

文章目录 图片格式 WebP、JPEG、PNG、SVG 及转换1. 图片格式1.1 WebP1.2 JPEG1.3 PNG1.4 SVG1.5 ... 2. 格式转换2.1 Python 批量转 WebP2.2 在线转换工具2.2.1 Shutterstock2.2.2 PicWish2.2.3 MyEdit2.2.4 Freeconvert2.2.5 iLoveIMG Reference 图片格式 WebP、JPEG、PNG、SV…

数据压缩专题——静止图像的小波变换编码

随着数字图像技术的发展和应用的广泛&#xff0c;对图像的压缩和编码变得越来越重要。小波变换编码作为一种有效的图像压缩和编码方法&#xff0c;在静止图像处理中得到了广泛应用。本文将介绍静止图像的小波变换编码的基本原理和关键步骤&#xff0c;以及其在图像压缩中的应用…

nginx+keepalived实现七层负载

目录 一、部署nginx01、nginx02 二、keepalived配置&#xff08;抢占模式、master- backup模式&#xff09; 三、测试 四、非抢占模式&#xff08;backup-backup模式&#xff09; nginx01 11.0.1.31nginx0211.0.1.32虚拟IP&#xff08;VIP&#xff09;11.0.1.30 一、部署ngin…

java使用JSON工具解析字符串、数组详解

一&#xff1a;问题 1.最近自己在前后端数据交互时需要进行JSON格式字符串、数组数据进行转换&#xff0c;进行问题整理 2.遇到需要JSON字符串转换的朋友可以阅读 二&#xff1a;解析步骤 1.第一点首先确定需求&#xff0c;明确需要转的字符串是一个对象还是一个数组&#…

Large-Precision Sign using PBS

参考文献&#xff1a; [CLOT21] Chillotti I, Ligier D, Orfila J B, et al. Improved programmable bootstrapping with larger precision and efficient arithmetic circuits for TFHE[C]//Advances in Cryptology–ASIACRYPT 2021: 27th International Conference on the T…

mysql 空间函数

ST_GeomFromText&#xff1a;将文本表示的几何对象转换为几何对象。 SELECT ST_GeomFromText(POINT(1 1)); ST_AsText&#xff1a;将几何对象转换为文本表示。 SELECT ST_AsText(ST_GeomFromText(POINT(1 1))); ST_Contains&#xff1a;判断一个几何对象是否包含另一个几何对象…

MongoDB聚合:$merge 阶段(1)

$merge的用途是把聚合管道产生的结果写入指定的集合&#xff0c;有时候可以用$merge来做物化视图。需要注意&#xff0c;$meger操作必须是聚合管道的最后一个阶段。具体功能有&#xff1a; 能够输出到当前或不同的数据库能够输出到正在聚合的集合&#xff08;慎重&#xff1a;…

Observer观察者模式(组件协作)

观察者模式&#xff08;组件协作&#xff09; 链接&#xff1a;观察者模式实例代码 解析 目的 在软件构建过程中&#xff0c;我们需要为某些对象建立一种“通知依赖关系” ——一个对象&#xff08;目标对象&#xff09;的状态发生改变&#xff0c;所有的依赖对象&#xff0…

UI演示双视图立体匹配与重建

相关文章&#xff1a; PyQt5和Qt designer的详细安装教程&#xff1a;https://blog.csdn.net/qq_43811536/article/details/135185233?spm1001.2014.3001.5501Qt designer界面和所有组件功能的详细介绍&#xff1a;https://blog.csdn.net/qq_43811536/article/details/1351868…

门诊抽血化验污水处理设备生产厂家

诸城市鑫淼环保小编带大家了解一下门诊抽血化验污水处理设备生产厂家 疾控中心实验室废水处理一体化设备的构造原理是在采用生化处理技术的基础上&#xff0c;结合化学、物理处理工艺&#xff0c;对实验室废水进行处理&#xff0c;达到达标排放的要求。一体化设备包括厌氧处理系…

MySQL 执行过程

MySQL 的执行流程也确实是一个复杂的过程&#xff0c;它涉及多个组件的协同工作&#xff0c;故而在面试或者工作的过程中很容易陷入迷惑和误区。 MySQL 执行过程 本篇将以 MySQL 常见的 InnoDB 存储引擎为例&#xff0c;为大家详细介绍 SQL 语句的执行流程。从连接器开始&…

Spring基础IoC(控制反转)与DI(依赖注入)

1. Spring 基础 1.1 什么是Spring框架&#xff1f;它能带来那些好处&#xff1f; Spring 是一个开源的轻量级的 Java 开发框架&#xff0c;可以帮助开发人员更高效的进行开发&#xff0c;主要优势在于简化开发和框架整合。 Spring框架整合了很多模块&#xff0c;这些模块可以…

LeetCode 刷题日志

文章目录 1954. 收集足够苹果的最小花园周长思考&#xff1a;暴力枚举代码实现二分查找代码实现 1954. 收集足够苹果的最小花园周长 1954. 收集足够苹果的最小花园周长 难度&#xff1a; 中等 题目大意&#xff1a; 给你一个用无限二维网格表示的花园&#xff0c;每一个 整…

Matplotlib ------ 纵坐标科学计数法含义

matplotlib 纵坐标科学计数法含义 引言正文 引言 今天画图时遇到了一个问题&#xff0c;发现纵坐标是科学计数法的表示&#xff0c;但是很难理解它的含义&#xff0c;这里特来记录一下。 正文 我们以下图为例&#xff0c; 由图上我们可以看出&#xff0c;纵坐标显示为 1e-…

PHP序列化总结3--反序列化的简单利用及案例分析

反序列化中生成对象里面的值&#xff0c;是由反序列化里面的值决定&#xff0c;与原类中预定义的值的值无关&#xff0c;穷反序列化的对象可以使用类中的变量和方法 案例分析 反序列化中的值可以覆盖原类中的值 我们创建一个对象&#xff0c;对象创建的时候触发了construct方…

纯CSS3制作优惠券线性UI效果

纯CSS3制作优惠券线性UI效果-遇见你与你分享

《分布式事务理论基础:CAP定理 BASE理论》

目录 学习目标 1.分布式事务理论基础 1.1.本地事务 1.2.分布式事务 分布式事务产生的原因&#xff1f; 哪些场景会产生分布式事务&#xff1f; 单体系统会产生分布式事务问题吗&#xff1f; 只有一个库&#xff0c;会产生分布式事务问题吗&#xff1f; 分布式事务举…