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;
}
相关推荐
光头程序员1 分钟前
Vite 前端项目 - CSS变量智能提示
前端·css
克喵的水银蛇1 分钟前
Flutter 通用下拉选择器:DropdownSelector 一键实现自定义下拉交互
开发语言·javascript·ecmascript
木易 士心2 分钟前
深入理解 TypeScript 声明文件(.d.ts):类型系统的桥梁
前端·javascript·typescript
2401_860494703 分钟前
在React Native鸿蒙跨平台开发中实现一个基数排序算法,如何进行找到最大数:遍历数组找到最大值呢?
javascript·算法·react native·react.js·排序算法·harmonyos
抹茶冰淇淋4 分钟前
面对新电脑,前端开发者需要进行哪些初始化配置
前端·github
HIT_Weston4 分钟前
55、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(七)
前端·http·gitlab
Watermelo6176 分钟前
如何优雅地导出 VS Code 项目目录结构
前端·javascript·vue.js·vscode·算法·性能优化·node.js
艾小码7 分钟前
前端性能加速器:Vue Router懒加载与组件分包的极致优化
前端·javascript·vue.js
Moment8 分钟前
使用 Tiptap 编写一个富文本编辑器为什么对很多人来说很难 🤔🤔🤔
前端·javascript·github
测试人社区—66791 小时前
破茧成蝶:DevOps流水线测试环节的效能跃迁之路
运维·人工智能·学习·flutter·ui·自动化·devops