message box确认弹框确认和取消按钮颜色互换

一、elementui中标准的样式如下图所示

二、现在有个需求想要做成如下所示的弹框，因为强制删除不可逆，所以希望用户谨慎考虑删除操作，所以就希望取消和确认颜色互换。

三、话不多说上代码

this.$confirm('是否强制删除？', '告警', {confirmButtonText: '确定',cancelButtonText: '取消',confirmButtonClass: 'btnConfirm',cancelButtonClass: 'btnCancel'  ,type: 'warning'}).then(() => {//执行操作}).catch(() => {})

在样式中定义,样式可以自定义

<style lang="scss">
.btnConfirm{background: #FFFFFF !important;color:#606266 !important;border: 1px solid #dcdfe6 !important;
}
.btnCancel{background: #009BF4 !important;color:#FFFFFF !important;
}
.el-button:first-child:hover{color: #fff !important;background-color: #409eff !important;
}
.el-button:nth-child(2):hover{color: #409eff !important;border-color: #c6e2ff !important;background-color: #ecf5ff !important;
}
</style>

四、说明
网上找了一堆没用的，这个是个人写的，可能有所不足

message box确认弹框确认和取消按钮颜色互换相关推荐

mint-ui message box confirm弹框确认和取消按钮的回调
调用mint-ui message box confirm方法后点击确认和取消后如何执行对应的回调函数 MessageBox.confirm('', { message: 'xxx,你确定?', ...
vue 组件封装确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue 文件封装 <template><div class="confirmBgc animations" :style=& ...
常用UI模板，loading框，提醒框，弹框确认框
css部分 #public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0 ...
【bat】判断字符串是否包含某字符串；bat字符串截取；vbs 如何加入参数；Windows如何后台运行bat文件（没有命令提示符框）；.bat文件设置自动关机以及弹框确认
[bat]判断字符串是否包含某字符串: @echo off set a=55544333 set c=6666dfsfds set b=44 echo %a%| findstr %b% >nul ...
Modal的二次确认弹框触发时机
Modal的二次确认弹框触发时机 react中modal中的值变化了之后点击取消弹出二次确认弹窗,要是值没有变化可以直接关闭modal. 在项目里边有个需求,就是需要我们的modal弹窗(modal里 ...
【无标题】Android studio中提示框“确定”和“取消”按钮的编写
Android studio中提示框"确定"和"取消"按钮的编写 1.写在前面的话 2.目标任务 3.实现过程 3.1布局文件的编写 3.1编写对话框 4.总结 ...
layui弹框确认及取消按钮
1.取消按钮function btn1() {layer.closeAll(); } 2.确认按钮 function btn() {layui.use('layer', function(){var ...
vue element 确认弹框中显示图片(message里)
代码如下: ------------------- 此部分卸载Message.box内部 -----------------const weiXinUrl = require("../../ ...
Android 简易的自定义确认弹框AlertDialog
使用方式/构造函数参数解释: 参数一:上下文; 参数二:标题; 参数三:内容; 参数四:确认按钮点击回调 CustomDialog(this, "清空输入", "确定要清 ...

message box确认弹框确认和取消按钮颜色互换

message box确认弹框确认和取消按钮颜色互换相关推荐

最新文章

热门文章