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;
}
相关推荐
星空椰7 分钟前
JavaScript 基础入门:从零开始掌握变量与数据类型
开发语言·前端·javascript·ecmascript
千寻简12 分钟前
一个让 Claude Code 顺手很多的状态栏插件:claude-hud
前端·后端
Ruihong21 分钟前
你的 Vue 3 生命周期,VuReact 会编译成什么样的 React?
vue.js·react.js·面试
HelloReader21 分钟前
QML 最佳实践写出高质量、可维护、高性能的代码(十二)
前端
HelloReader22 分钟前
Qt Quick Controls 全览控件、弹窗、导航与样式定制(十一)
前端
意法半导体STM3226 分钟前
【官方原创】STM32 USBx Host HID standardalone移植示例 LAT1449
开发语言·前端·stm32·单片机·嵌入式硬件
竹林81826 分钟前
用wagmi v2构建DeFi前端:从连接钱包到读取合约数据的完整实战与避坑指南
前端·javascript
over69727 分钟前
面试官视角:TypeScript Pick 工具类型深度解析与手写实现
前端·面试
木斯佳28 分钟前
前端八股文面经大全:字节AIDP前端一面(2026-04-13)·面经深度解析
前端·音视频·webrtc·断点续传
Kinghiee31 分钟前
从零打造生产级前端错误监控 SDK:架构设计与 Vue3 实践
前端·javascript·vue.js·去重·错误捕获·上报·离线持久化