当前位置：首页 > article >正文

Element UI中messageBox怎么区分点击取消按钮关闭弹窗，和点击右上角x号以及点击遮罩层关闭按钮

article 2025/2/24 0:12:34

在某些场景下，我们可能需要区分点击取消按钮关闭 messageBox 和点击X号、遮罩层关闭 messageBox 。

实现：

将 distinguishCancelAndClose 设置为 true，这个属性的意思是：是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分，默认为false。

然后就可以在 .catch()中通过 action 参数来进行区分不同的关闭方式

this.$confirm('是否确认操作?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  distinguishCancelAndClose: true
}).then(() => {
  // 点击了确定按钮
  console.log('点击了确定按钮');
}).catch((action) => {
  if (action === 'cancel') {
    // 点击了取消按钮
    console.log('点击了取消按钮');
  } else if (action === 'close') {
    // 点击了右上角的x按钮或遮罩层
    console.log('点击了右上角的x按钮或遮罩层');
  }
});

查看全文

http://www.kler.cn/a/558182.html