Ant Design Vue全局對話確認框(confirm)的回調不觸發(fā)

更新時間：2023年07月28日 15:54:35 作者：貪吃蛇2120

這篇文章主要介紹了Ant Design Vue全局對話確認框(confirm)的回調不觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Ant Design Vue全局對話確認框的回調不觸發(fā)

我們先來看下官網給的案例和代碼。

<template>
? <a-button @click="showConfirm">
? ? Confirm
? </a-button>
</template>
<script>
export default {
? methods: {
? ? showConfirm() {
? ? ? this.$confirm({
? ? ? ? title: 'Do you want to delete these items?',
? ? ? ? content: 'When clicked the OK button, this dialog will be closed after 1 second',
? ? ? ? onOk() {
? ? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? ? setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
? ? ? ? ? }).catch(() => console.log('Oops errors!'));
? ? ? ? },
? ? ? ? onCancel() {},
? ? ? });
? ? },
? },
};
</script>

官網給了兩個回調一個是onOk 點擊確認的回調，還有一個是onCancel 是點擊取消的回調。

但是我們使用了就會發(fā)現里面的一些使用到this指向不對。導致里面需要用到this的功能都失效。

解決辦法

只需要把這兩個回調（onOk、onCancel）改成箭頭函數即可。

代碼如下：

 // 刪除
        deleteItem (row) {
          this.$confirm({
            title: '提示',
            content: '您是否確認刪除該組織？',
            // 點擊確認觸發(fā)的回調
            onOk: () => {
            //  這里模擬請求刪除的接口
            setTimeout(() => this.$message.success('刪除成功！'), 1000)
            },
            // 點取消觸發(fā)的回調
            onCancel: () => {
              this.$message.success('你已經取消此操作！')
            }
          })
        },

ant design confirm確認框的應用

用法如下：

this.$confirm({
            // iconClass: 'el-icon-question', //自定義圖標樣式
            title: '提示',
            content: '賬戶名稱與企業(yè)名稱不一致，請確認是否提交?',
            confirmButtonText: '確認', //確認按鈕文字更換
            cancelButtonText: '取消', //取消按鈕文字更換
            showClose: true, //是否顯示右上角關閉按鈕
            type: 'warning', //提示類型  success/info/warning/error
            onOk:() => {
            this.doSave(_this.mdl)
            .then((res) => {
              if (res.success) {
                _this.$message.success('保存成功')
                _this.$emit('ok')
              } else {
                _this.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.error(err)
            })
            .finally(() => {
              _this.confirmLoading = false
              _this.close()
            })     
            onCancel() {
                },
            }
          })

需要注意的是onOk中調用vue的方法doSave，此時需要用箭頭函數寫法，不然this指向出現問題，調不到doSave。