element ui的确认提示框按钮样式修改

修改确认提示框的默认按钮样式,使用css强制修改

例:

js代码:

javascript 复制代码
deleteUser(params){
    this.$confirm("您确定要删除吗?此操作无法撤销并且将永久删除所有数据。", "提示", 
        { type: "warning", cancelButtonClass: "user-cancel", confirmButtonClass: "user-confirm" })
        .then(() => {});
}

css代码:

css 复制代码
.el-message-box .el-message-box__btns .user-cancel {
  color: #FFFFFF;
  background: #1890ff;
  border-color: #1890ff;
}

.el-message-box .el-message-box__btns .user-cancel:hover {
  background: #46a6ff;
  border-color: #46a6ff;
}

.el-message-box .el-message-box__btns .user-confirm{
  background: #ffffff;
  color: #606266;
  border: 1px solid #DCDFE6;
  zoom: 0.8;
} 

.el-message-box .el-message-box__btns .user-confirm:hover {
  background: #e8f4ff;
  border-color: #badeff;
}
相关推荐
阿珊和她的猫15 分钟前
Chrome 的 SameSite 属性:原理与解决方案
前端·chrome
百锦再15 分钟前
线程安全的单例模式全方位解读:从原理到最佳实践
java·javascript·安全·spring·单例模式·kafka·tomcat
belldeep24 分钟前
nodejs: 能在线编辑 Markdown 文档的 Web 服务程序,更多扩展功能
前端·node.js·markdown·mermaid·highlight·katax
程序员林北北28 分钟前
【前端进阶之旅】一种新的数据格式:TOON
前端·javascript·vue.js·react.js·typescript·json
木斯佳29 分钟前
前端八股文面经大全:2026-01-23快手AI应用方向前端实习一面面经深度解析
前端·人工智能·状态模式
linux_cfan30 分钟前
Chrome 彻底封杀 Flash 后,安防监控如何实现 RTSP 流无插件播放?(2026解决方案)
javascript·安全·实时音视频·html5
强子感冒了1 小时前
Javascript学习笔记:BOM和DOM
javascript·笔记·学习
容沁风1 小时前
react路由Cannot GET错误
前端·react.js·前端框架·sharp7
少云清1 小时前
【UI自动化测试】6_web自动化测试 _浏览器操作
前端·web自动化测试
Never_Satisfied1 小时前
在c#中,抛出异常,并指定其message的值
java·javascript·c#