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;
}
相关推荐
yannick_liu2 分钟前
推荐一个可以在vue2中格式化json数据的插件
前端
可视之道2 分钟前
Canvas 渲染引擎性能优化实战:从 15 FPS 到 55 FPS
前端
进击的尘埃42 分钟前
拖拽搭建场景下的智能布局算法:栅格吸附、参考线与响应式出码
javascript
小猪努力学前端1 小时前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
bluceli1 小时前
前端构建工具深度解析:从Webpack到Vite的演进之路
前端
wuhen_n1 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n1 小时前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山1 小时前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
Kayshen1 小时前
我在设计工具里实现了一个 Agent Team:多智能体协作生成 UI 的实战经验
前端·aigc·agent
swipe2 小时前
深入理解 JavaScript 中的 this 绑定机制:从原理到实战
前端·javascript·面试