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;
}
相关推荐
kyriewen4 分钟前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
前端·javascript·设计模式
不会敲代码122 分钟前
从零搭建 AI 日记助手:用 Milvus 向量数据库实现语义搜索
javascript·openai
千寻girling35 分钟前
《 Git 详细教程 》
前端·后端·面试
Dxy12393102161 小时前
SVG画的曲线如何高亮显示
html
threelab1 小时前
Three.js UV 图像变换效果 | 三维可视化 / AI 提示词
javascript·人工智能·uv
之歆2 小时前
DAY08_CSS浮动与行内块布局实战指南(下)
前端·css
yqcoder2 小时前
CSS Position 全解析:5 种定位模式详解
前端·css
Rhi6373 小时前
从零搭建项目:React 19 + Vite 8 + Tailwind CSS v4 实战配置
前端
竹林8183 小时前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript
之歆3 小时前
DAY08_CSS浮动与行内块布局实战指南(上)
前端·css