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

基于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

相关文章:

基于ElementUI二次封装弹窗组件

效果&#xff1a; 一、自定义内容类型弹窗 <!-- title&#xff1a;对话框的标题confirmLoading&#xff1a;当前是否处于提交中titleCenter&#xff1a;对话框标题居中方式footerCenter&#xff1a;底部按钮的对其方式visible&#xff1a;是否显示弹窗width&#xff1a;设置…...

linux cat命令改变功能显示当前文件行号

linux的cat命令使用-n显示多个文件行号时&#xff0c;行号是累加的&#xff0c;不是到了新文件就重新计数。这样满足不了我的需求。如果到了新文件能够重新计数&#xff0c;就能使用-nf&#xff08;在上一篇-f显示文件名功能的基础上&#xff09;加| grep xxx&#xff0c;既能直…...

Django-REST-Framework 如何快速生成Swagger, ReDoc格式的 REST API 文档

1、API 接口文档的几种规范格式 前后端分离项目中&#xff0c;使用规范、便捷的API接口文档工具&#xff0c;可以有效提高团队工作效率。 标准化的API文档的益处&#xff1a; 允许开发人员以交互式的方式查看、测试API接口&#xff0c;以方便使用将所有可暴露的API接口进行分…...

SpringBoot当中的Singleton和Prototype详解

在Spring Boot中&#xff0c;Singleton和Prototype是两种Bean的作用域。这两种作用域决定了Spring容器如何创建和管理Bean的实例。 Singleton&#xff08;单例&#xff09;&#xff1a; 当一个Bean被配置为Singleton作用域时&#xff0c;Spring容器在启动时只会创建该Bean的一个…...

LeetCode第1题 - 两数之和

题目 给定一个整数数组 nums 和一个目标值 target&#xff0c;请你在该数组中找出和为目标值的那 两个 整数&#xff0c;并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;你不能重复利用这个数组中同样的元素。 示例 给定 nums [2, 7, 11, 15], …...

(14)Linux 地址空间的理解

前言&#xff1a;本章核心主题为 "进程地址空间"。 一、Linux 进程地址空间 程序地址空间是内存吗&#xff1f;不是&#xff01;程序地址空间不是内存&#xff01; 其实&#xff0c;我们称之为程序地址空间都不准确&#xff0c;应该叫 进程地址空间&#xff0c;这…...

Java中的设计模式

设计模式是软件开发中常见问题的可重用解决方案。在Java中&#xff0c;设计模式有助于提高代码的可维护性、可读性和可扩展性。以下是一篇关于Java中设计模式的文章&#xff0c;以帮助您更好地理解这些模式。 一、设计模式简介 设计模式是经过验证的解决方案&#xff0c;用于…...

Hadoop(2):常见的MapReduce[在Ubuntu中运行!]

1 以词频统计为例子介绍 mapreduce怎么写出来的 弄清楚MapReduce的各个过程&#xff1a; 将文件输入后&#xff0c;返回的<k1,v1>代表的含义是&#xff1a;k1表示偏移量&#xff0c;即v1的第一个字母在文件中的索引&#xff08;从0开始数的&#xff09;&#xff1b;v1表…...

Unity | 快速修复Animation missing错误

目录 一、背景 二、效果 三、解决办法 一、背景 最近在做2D 骨骼动画相关的Demo&#xff0c;我自己使用Unity引擎进行骨骼绑定并创建了anim后&#xff0c;一切正常&#xff0c;anim也能播放。但是昨天我修改Obj及子物体的名称&#xff08;由中文改为英文&#xff0c;如&…...

ssm基于web的志愿者管理系统的设计与实现+vue论文

摘 要 使用旧方法对志愿者管理系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在志愿者管理系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的志愿者…...

C++运算符重载(插入and提取)

介绍 本文主要介绍 插入(>>) and 提取(<<)的运算符重载 1.插入(>>) 提取(<<)只能是友元函数 2.插入关键词istream 例子&#xff1a;istream& operator>>(istream& in, sumber&Left) 3.提取关键词ostream 例子&#xff1a;ostream&a…...

C#高级 08Json操作

1.概念 Json是存储和交换文本信息的语法。类似于XML。Json比XML更小、更快、更易解析。Json与XML一样是一种数据格式。Json是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。Json采取完全独立于语言的文本格式&#xff0c; 但是也使用了类似于C语言的习惯。这些特性使…...

封装uniapp签字板

新开发的业务涉及到签字功能&#xff0c;由于是动态的表单&#xff0c;无法确定它会出现在哪里&#xff0c;不得已封装模块。 其中涉及到一个难点就是this的指向性问题&#xff0c; 第二个是微信小程序写法&#xff0c; 我这个写法里用了u-view的写法&#xff0c;可以自己修改组…...

Mybatis行为配置之Ⅳ—日志

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…...

Java设计模式-外观模式

目录 一、影院管理项目 二、外观模式 &#xff08;一&#xff09;基本介绍 &#xff08;二&#xff09;原理类图 &#xff08;三&#xff09;解决影院管理 &#xff08;四&#xff09;注意事项和细节 &#xff08;五&#xff09;外观模式在MyBatis框架应用的源码分析 一…...

js+css实现颜色选择器

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>颜色选择器</title><style>.color-box {width: 50px;height: 50px;border: 1px solid #000;cursor: pointer;}</style> </head> <body><…...

Go语言中的包管理工具之Go Modules的使用

GoLang 中常用的包管理的方式 常用的有三种 Go PathGo VendorGo Modules 关于 Go Modules 1 ) 概述 Go的包管理&#xff0c;经过社区和官方的共同努力下&#xff0c;最终在百家争鸣后Go官方在 2018.8 推出了go 1.11版本中的Go Modules&#xff0c;并且很快成为一统江湖的包…...

【c/c++】指针例图基础详解

文章目录 指针变量内存指针详解例1例2练习&答案解析 指针变量内存 int main(){// 各类型变量占字节数printf("char: %d\n",sizeof(char)); // 1printf("short: %d\n",sizeof(short)); // 2printf("int: %d\n",sizeof(int)); // 4pri…...

TCP/IP的网络层(即IP层)之IP地址和网络掩码,在视频监控系统中的配置和应用

在给客户讲解我们的AS-V1000视频监控平台的时候&#xff0c;有的客户经常会配置错误IP地址的掩码和网关&#xff0c;导致出现一些网路问题。而在视频监控系统中&#xff0c;IP地址和子网掩码是用于标识网络中设备的重要标识符。IP地址被用来唯一地标识一个网络设备&#xff0c;…...

代码随想录刷题 | Day1

今日学习目标 一、基础 数组 array类 模板类vector 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的 而且大家如果使用C的话&…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...