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;
}
相关推荐
一点 内容几秒前
深入浅出:解锁React Hooks的魔法——从入门到实战优化指南
javascript·react.js·ecmascript
紫_龙3 分钟前
最新版vue3+TypeScript开发入门到实战教程之组件通信之一
前端·vue.js·typescript
故以往之不谏4 分钟前
JAVA--类和对象4.1--构造方法基础
java·开发语言·javascript
yivifu8 分钟前
接近完美的HTML文本双行合一排版
前端·javascript·html·双行合一
fxshy9 分钟前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
鹏程十八少11 分钟前
10. Android Shadow是如何实现像tinker热修复动态修复so(源码解析)
android·前端·面试
destinying14 分钟前
性能优化之项目实战:从构建到部署的完整优化方案
前端·javascript·vue.js
吃不胖爹14 分钟前
flutter项目如何打包,创建签名与配置签名
javascript·flutter·架构
英俊潇洒美少年16 分钟前
react如何实现双向绑定
javascript·react.js·ecmascript
我命由我1234518 分钟前
React - React Redux 数据共享、Redux DevTools、React Redux 最终优化
前端·javascript·react.js·前端框架·ecmascript·html5·js