首页 > 其他分享 >elementUI确认消息弹框区分取消和关闭按钮

elementUI确认消息弹框区分取消和关闭按钮

时间:2023-11-07 10:22:04浏览次数:33  
标签:elementUI 弹框 action 关闭 按钮 msg

预期效果:

说明:
默认情况下,elementUI的确认消息弹框中取消按钮和右上角关闭按钮,走的是同一个方法,也就是catch方法的回调,如果项目中有区分,默认的是无法支持的。所以要重新配置一下,话不多说,上代码:

    //res.msg表示提示信息内容
    this.$confirm(res.msg, '提示',{
          confirmButtonText: "继续支付",
          cancelButtonText: "升级权益",
          customClass: 'cm_msg', //可以设置自定义css
          distinguishCancelAndClose: true, //区分取消与关闭
          closeOnClickModal: false, //点击遮罩是否关闭弹窗
        }).then((action) => {
          //继续支付按钮代码块
            ***
        }).catch((action) => {
          if (action === 'cancel') {
           //升级权益按钮代码块
            ***
          } else {
            //关闭弹窗
            return;
          }
     });

  

标签:elementUI,弹框,action,关闭,按钮,msg
From: https://www.cnblogs.com/mzhen/p/17814438.html

相关文章

  • 在ASP.NET MVC框架中,如何处理多个提交按钮?
    内容来自DOChttps://q.houxu6.top/?s=在ASP.NETMVC框架中,如何处理多个提交按钮?在ASP.NETFrameworkBeta中,有几种方法可以处理同一表单中的多个提交按钮。一种方法是使用一个隐藏字段来区分不同的提交按钮。例如:<%Html.BeginForm("MyAction","MyController",FormMethod......
  • Axure——按钮交互:打开链接&关闭窗口
    (1)打开链接——在当前窗口打开链接1.选中按钮元件——单击【新建交互】——选择【单击时】——选择【打开链接】——【链接到外部URL】并输入对应的网址,如www.baidu.com——点击【确定】我们按F5预览一下效果:点击按钮,在当前窗口打开百度页面(2)打开链接——在新窗口打开链接1.......
  • 苹果iOS 17.2年底推送:iPhone 15 Pro的自定义操作按钮功能升级
    据报道,苹果会在年底推送iOS17.2版本,新版系统将会修复iPhone15系列WiFi速度慢的问题。与此同时,iOS17.2将会带来翻译功能,iPhone15Pro的自定义操作按钮切换到翻译选项后,按住会弹出一个翻译窗口,用于翻译设备听到的语音内容。除此之外,这枚自定义操作按钮还可以设置为其它很多功......
  • elementUI button防止频繁点击
    importVuefrom'vue'constpreventReClick=Vue.directive('preventReClick',{ inserted:function(el,binding){  el.addEventListener('click',()=>{   if(!el.disabled){    el.disabled=true    setTi......
  • 使用CSS写一个带追踪特效的渐变按钮
    写一个带追踪特效的渐变按钮开头先观看这张GIF图:是否被它的出色动画效果所吸引?这是从一个完美竞技平台中录制出来的我脑海中萌生了用CSS来模仿这一效果的念头绘画元素我们先记录下这个按钮浮动的颜色(#868BFF),还有按钮的背景的渐变色(#39D5FF->#868bff)外部使用一个div元素表......
  • elementui字符串和数字型单选框的区别
    单选框的取值类型一般有两种,一种是字符串,一种是数字型。两者在使用上有区别数字型<el-radio:disabled="true"v-model="meetingType":label="1">线上会议</el-radio><el-radio:disabled="true"v-model=......
  • vue3 -点击按钮进入新的页面
    一、调用页面//路由import{useRouter}from'vue-routerlet$router=useRouter()//车组调整页面consthandleCar=(row:any)=>{ $router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})}二、新打开的页面importuseTagsViewSt......
  • uniapp 动态修改顶部导航栏右侧按钮 titleNView(APP-PLUS、H5)
    1<script>2exportdefault{3onReady(){4//已渲染5varpages=getCurrentPages();6varpage=pages[pages.length-1];78//#ifdefH59document.querySelector('.uni-page-head-ft.uni-......
  • ElementUI Checkbox 多选框 返回对象
    checkBox和checkGroup通过v-model绑定的数据只能是number/string/Array 如何回调返回对象呢? 已知能返回label字符串,我们可以把label=对象id +','+ 对象名称拼接,然后返回,或者label=json字符串再传出每次选中操作后会回调返回选中数组 ......
  • BIP保存前出现弹框 阻止保存 点击修改后,再继续保存事件
    viewModel.on("beforeSave",function(args){letpromise=newcb.promise();cb.utils.confirm(title:"是否保存?",okText:"修改",cancelText:"不修改",function(){if(true){promise.rej......