element ui confirm弹窗自定义样式小知识一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~

1.Message Box 按钮位置自定义样式

cancelButtonClass: 'btn-custom-cancel',

this.$confirm('是否确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    cancelButtonClass: 'btn-custom-cancel',
    type: 'warning'
}).then(() => {
    this.tableDel(_tabnum, ucodes);
}).catch(() => {

});

/* 弹窗提示按钮位置 */
.btn-custom-cancel {
    float: right;
    margin-left: 10px;
}

效果图：

2.Message Box 自定义el-message-box样式

customClass: 'return-visit-message-box',

this.$confirm('为避免项目重复，您可先去项目库中查询是否已有该项目，若有可直接引用！', '', {
    confirmButtonText: '进入项目库查询',//确定
    cancelButtonText: '确定没有，继续新增',//取消
    customClass: 'return-visit-message-box',
    distinguishCancelAndClose: true,
    type: 'warning',
    // cancelButtonClass: 'btn-custom-cancel',
}).then(() => {

})

.return-visit-message-box {
    border: 1px solid #FFE9A7;
    background-color: #FFFAEB;
}

效果图：

3.message 提示的两种方式

this.$message({
      message: r.value || '接口报错',
      type: 'error'
});
this.$message.success("删除成功");

专栏推荐

推荐一下自己的专栏，欢迎大家收藏关注😊~

element ui confirm弹窗自定义样式小知识

1.Message Box 按钮位置自定义样式

2.Message Box 自定义el-message-box样式

3.message 提示的两种方式

专栏推荐

近期热门文章