首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中this.$confirm

vue中this.$confirm的使用及说明

2024-08-22 09:52:05 作者：皮皮皮皮克斯

这篇文章主要介绍了vue中this.$confirm的使用及说明方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中this.$confirm

笔记整理：

之前项目中比较常见的confirm确认框写法，（与this.$router相似）

VUE+elementUI写法

  onStopClick(row: any) {
    **this.$confirm**('确定停用该条消息吗 ?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.requestSwitchStatus(row)
      })
      .catch(() => {})
  }

换成ant Design Vue时写法

handleDelete(record) {
  this.$confirm({
    title:'确认删除吗？',
    okText: '是',
    cancelText: '否',
    icon: 'exclamation-circle',
    confirm: this.handleClear()
  })
}

VUE+VUX 写法：（参考VUX文档~）

            this.$vux.confirm.show({
              title: 标题,
              content: content,
              onCancel() {
                let url = window.location.href
                if (url.indexOf('isApp') > -1) {
                  _this.goNV({type: ''})
                } else {
                  _this.$router.push('/home')
                }
              },
              onConfirm() {
                _this.crushEggRequest(param)
              }
            })```

vue项目中this.$confirm中，确定和取消执行不同的逻辑

效果图片

在这里插入图片描述

【确定】按钮执行逻辑A，【取消】按钮执行逻辑B。

[x]按钮关闭confirm，和取消按钮执行不同的逻辑

代码如下：

this.$confirm("是否确定删除选中的数据?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    distinguishCancelAndClose: true,    // 重要，设置为true才会把右上角X和取消区分开来
    closeOnClickModal: false
}).then(function () {
    // TODO 确认通过执行逻辑
 
}).catch(function (e) {
    if (e == 'cancel') {
        // TODO 确认不通过执行逻辑
         
    } else if(e == 'close') {
        // TODO 右上角X的执行逻辑
 
    }
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。