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;
}
相关推荐
普修罗双战士15 小时前
项目设计-文章系统发布文章完整前后端设计
java·数据库·vue.js·spring boot·git·intellij-idea
Csvn15 小时前
Vue 3 Composition API 深度解析
前端·vue.js
鹏程十八少15 小时前
11. 2026金三银四 能答对这 29 道题,你的 Android 插件化就算真正通关了
前端·后端·面试
HAPPY酷16 小时前
[UE5 避坑指南] 为什么打包后 UI 消失了?Launch Game 与强制加载
java·ui·ue5
潇凝子潇16 小时前
使用英伟达免费调用多家大模型API
java·前端·javascript
旷世奇才李先生16 小时前
Vue 3\+Vite\+Pinia实战:前端工程化与组件化开发全指南
前端·vue.js
Beginner x_u16 小时前
前端八股整理(手写 01)|Promise 超时控制、红绿灯与 Promise.all
前端·javascript·promise
周bro16 小时前
vue2+element ui 中的el-table表格 选中当前行当前行变色,单选/多选--------续集:表格样式修改整合
vue.js·ui·elementui
万少1 天前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen111 天前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript