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;
}
相关推荐
GISer_Jing14 分钟前
React中useState()钩子和函数式组件底层渲染流程详解
前端·react.js·前端框架
私人珍藏库1 小时前
Google Chrome-便携增强版[解压即用]
前端·chrome
我的青春不太冷2 小时前
【实战篇章】深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据
运维·服务器·前端·学习
Anlici3 小时前
2025前端高频面试题--CSS篇
前端·css
追光少年33223 小时前
Learning Vue 读书笔记 Chapter 4
前端·javascript·vue.js
软件2053 小时前
【Vite + Vue + Ts 项目三个 tsconfig 文件】
前端·javascript·vue.js
老大白菜4 小时前
在 Ubuntu 中使用 FastAPI 创建一个简单的 Web 应用程序
前端·ubuntu·fastapi
渔阳节度使4 小时前
React
前端·react.js·前端框架
LCG元6 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian6 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code