快捷導(dǎo)航

Ant Design Vue全局對(duì)話確認(rèn)框(confirm)的回調(diào)不觸發(fā)

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

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

Ant Design Vue全局對(duì)話確認(rèn)框的回調(diào)不觸發(fā)

我們先來(lái)看下官網(wǎng)給的案例和代碼。

<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>

官網(wǎng)給了兩個(gè)回調(diào)一個(gè)是onOk 點(diǎn)擊確認(rèn)的回調(diào)，還有一個(gè)是onCancel 是點(diǎn)擊取消的回調(diào)。

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

解決辦法

只需要把這兩個(gè)回調(diào)（onOk、onCancel）改成箭頭函數(shù)即可。

代碼如下：

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

ant design confirm確認(rèn)框的應(yīng)用

用法如下：

this.$confirm({
            // iconClass: 'el-icon-question', //自定義圖標(biāo)樣式
            title: '提示',
            content: '賬戶名稱與企業(yè)名稱不一致，請(qǐng)確認(rèn)是否提交?',
            confirmButtonText: '確認(rèn)', //確認(rèn)按鈕文字更換
            cancelButtonText: '取消', //取消按鈕文字更換
            showClose: true, //是否顯示右上角關(guān)閉按鈕
            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中調(diào)用vue的方法doSave，此時(shí)需要用箭頭函數(shù)寫(xiě)法，不然this指向出現(xiàn)問(wèn)題，調(diào)不到doSave。