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;
}
相关推荐
桜吹雪20 分钟前
markstream-vue实战踩坑笔记
前端
南村群童欺我老无力.34 分钟前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
C_心欲无痕39 分钟前
nginx - 实现域名跳转的几种方式
运维·前端·nginx
花哥码天下42 分钟前
恢复网站console.log的脚本
前端·javascript·vue.js
LawrenceLan44 分钟前
Flutter 零基础入门(十二):枚举(enum)与状态管理的第一步
开发语言·前端·flutter·dart
Zoey的笔记本1 小时前
「支持ISO27001的GTD协作平台」数据生命周期管理方案与加密通信协议
java·前端·数据库
北辰alk1 小时前
Vue 的 nextTick:破解异步更新的玄机
vue.js
北辰alk1 小时前
Vue 技巧揭秘:一个事件触发多个方法,你竟然还不知道?
vue.js
北辰alk1 小时前
Vue 中 computed 和 watch 的深度解析:别再用错了!
vue.js
奔跑的呱呱牛1 小时前
geojson-to-wkt 坐标格式转换
javascript·arcgis