【Vue】elementUI-MessageBox组件相关

最新推荐文章于 2025-05-30 11:26:00 发布

原创最新推荐文章于 2025-05-30 11:26:00 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

文章介绍了如何在Element-UI的MessageBox组件基础上进行个性化定制，包括调整按钮位置、添加图片、修改样式，并最终封装成可全局使用的组件，以便在其他页面中方便调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方代码：

<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.调换底部【取消】【确认】按钮位置

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

2.在弹框内添加图片

			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.修改顶部标题、中部内容、底部按钮样式

.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

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引入

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

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

4)页面中使用

	methods: {
		showMsg() {
			this.$MessageBox(
				'确认删除商品标题',
				'删除后不可恢复1', // 可选
				'删除后不可恢复2' // 可选
			)
				.then(() => {
					// 确认删除的逻辑
					alert('success');
				})
				.catch(() => {
					alert('cancel');
					// 取消删除的逻辑
				});
		},
    }