效果图:
注意需要在根样式文件中写,因为MessageBox弹窗和App.vue平级
<style >
//确认删除按钮的颜色
.confrim-del {
color: #FFFFFF;
background: #E62129;
border: none;
opacity: 1;
border-radius: 4px;
}
.confrim-del:hover{
background: #E62129;
border: none;
}
</style >
handleDelete() {
const h = this.$createElement;
this.$msgbox({
title: '确认删除',
message: h('div', null, [
h('div', { style: 'fontSize:0.2rem;' }, [h('span', null, "确认删除项目"), h('span', { style: 'display:inline-block;width:55px;height:21px;line-height:21px;text-align:center;border-radius:4px;background:#D70009;color:#fff;' }, "测试1.1"), h('span', null, "吗?")]),
h('div', { style: 'color: #CCCCCC;fontSize:0.2rem;marginTop:0.125rem;' }, "删除后如果想找回该项目,可通过配置中心由管理员进行恢复。")
]),
showCancelButton: true,
confirmButtonClass: "confrim-del",
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
}