【Vue】elementUI-MessageBox组件相关

官方代码： 

<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');// 取消删除的逻辑});},}