MessageBox 弹框中按钮颜色设置confirmButtonClass用法

543 阅读1分钟

效果图:

image.png

注意需要在根样式文件中写,因为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
                });
            });
        }