【Vue】elementUI-MessageBox组件相关

官方代码:

javascript 复制代码
<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

1.调换底部【取消】【确认】按钮位置

css 复制代码
	.el-message-box__btns {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row-reverse;//反序
	}

2.在弹框内添加图片

javascript 复制代码
			const h = this.$createElement;
			this.$confirm('', {
				title: '删除',
				message: h('div', null, [
					h('img', {
						attrs: { src: require('@/assets/images/msgBoxIcon.png') },
					}),
					h(
						'div',
						{
							class: 'msgBoxFont',
							// , style: 'margin:10px 0 0 40px;'
						},
						'确认删除商品'
					),
					h(
						'div',
						{
							class: 'msgBoxFont',
						},
						'删除的内容xxxx'
					),
				]),
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				customClass: 'del-model',
				closeOnClickModal: false,
				closeOnPressEscape: false,
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});

关键代码:

h('img', {

attrs: { src: require('@/assets/images/msgBoxIcon.png') },

}),

3.修改顶部标题、中部内容、底部按钮 样式

javascript 复制代码
.el-message-box.del-model {
	width: 525px;
	// width: 27%;
	height: 321px;
	background: #ffffff;
	border-radius: 35px;
	.el-message-box__header {
		padding: 40px 0 0 40px;
		.el-message-box__title {
			font-weight: 600;
			font-size: 20px;
			color: #333333;
		}
		.el-message-box__headerbtn {
			width: 40px;
			height: 40px;
			background-color: #f4f9fd;
			border-radius: 8px;
			top: 34px;
			right: 40px;
			.el-message-box__close.el-icon-close {
				font-size: 20px;
				font-weight: bolder;
				color: #333333;
			}
		}
	}
	.el-message-box__content {
		padding: 50px 40px 0 40px;

		.msgBoxFont {
			font-weight: 400;
			font-size: 17px;
			color: #333333;
			margin-left: 83px;
			max-height: 62px;
			overflow-y: auto;
		}
		.el-message-box__message {
			img {
				width: 62px;
				height: 55px;
				position: absolute;
			}
		}
	}
	.el-message-box__btns {
		margin-top: 60px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row-reverse;
		.el-button {
			width: 138px;
			height: 47px;
			background: #4d5aa0;
			border-radius: 10px;
			span {
				font-weight: 600;
				font-size: 16px;
				color: #ffffff;
			}
		}
	}
}

4.封装组件,自定义样式,全局引入并在其他页面直接使用

1)封装组件

在++src/utils/++ 下创建customerMessageBox.js

javascript 复制代码
import { MessageBox } from 'element-ui';
import Vue from 'vue';

export default function customMessageBox() {
	Vue.prototype.$chMessageBox = function (title, message1, message2) {
		const h = this.$createElement;

		return MessageBox.confirm('', {
			title: title || '删除',
			message: h('div', null, [
				h('img', {
					attrs: { src: require('@/assets/images/msgBoxIcon.png') },
				}),
				h('div', { class: 'msgBoxFont' }, message1),
				h('div', { class: 'msgBoxFont' }, message2),
			]),
			confirmButtonText: window.vm.$i18n.t('system.confirm'),
			cancelButtonText: window.vm.$i18n.t('system.cancel'),//可使用国际化资源,或直接使用目标语言,如'确认'、'取消'
			customClass: 'del-model',
			closeOnClickModal: false,
			closeOnPressEscape: false,
		})
			.then(() => {})
			.catch(() => {
				return Promise.reject();
			});
	};
}

2)main.js引入

javascript 复制代码
import messageBox from '@/utils/customermessageBox.js';
Vue.use(messageBox); //二次封装elementUI-MessageBox弹窗组件

3)样式自定义,参考问题2

4)页面中使用

javascript 复制代码
	methods: {
		showMsg() {
			this.$MessageBox(
				'确认删除商品标题',
				'删除后不可恢复1', // 可选
				'删除后不可恢复2' // 可选
			)
				.then(() => {
					// 确认删除的逻辑
					alert('success');
				})
				.catch(() => {
					alert('cancel');
					// 取消删除的逻辑
				});
		},
    }
相关推荐
abigale0312 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者31 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile35 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399738 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊43 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火43 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app