【Antd+vue】antd Modal.confirmは遅延閉鎖効果を実現する(確定をクリックし、要求が完了してから弾窓を閉じるのを待つ)

antd Modal.confirm遅延クローズ効果を実現

ビジネスシーン

分析

コード--持ってきて

を使います
Ant DesignのModalコンポーネントは、ビジネスでよく使用されます.ユーザに対して簡潔な確認ボックスが必要な場合、Modalを使用することができる.confirm()などの文法糖法.今日はpromiseで確認ダイアログを閉じるのを遅らせる方法(Modal.confirm)について、大きなセリフでお話しします.
ビジネスシーン
削除、終了などの機能を開発する際、Modalを使用することが多い.confirm()で実現します.ユーザがOKボタンをクリックした後、対応するインタフェースを要求し、要求に成功した後、弾窓を閉じることを望んでいる.効果図の表示(文章の最後にコードを添付します):
ぶんせき
実は公式サイトにもpromise遅延を使って確認ダイアログボックスを閉じる方法がありますが、settimeoutという非同期シーンを使っています.実際の開発では、ネットワークがこのような非同期シーンを要求するのが一般的です.非同期シーンは、タイミングタスク、ネットワークリクエスト、イベントバインドの3つです.Promiseを理解すれば、万変はその宗から離れないことに気づきます.
なぜ遅延閉鎖の効果を実現するのか.私の理由は以下の通りです.

は開発の観点から、要求がまだ完了していないことを避けるために、ユーザは他の操作を行う.

ユーザーの立場から言えば、弾窓の確定ボタンをクリックした後、弾窓を閉じずにloadingの効果を表示して少し待つことを望んでいます.操作に成功したら、この弾窓を閉じて、操作に成功したことをヒントにします.そうすると、現在どのような状態なのか、他の操作ができるかがもっと分かります.

コード–すぐ使用

<a @click="showConfirm('1')">  a>

// author by Emily  from CSDN
//      
showConfirm (mockId) {
     
  const _this = this
  this.$confirm({
     
    title: `        ?`,
    content: `         ,                `,
    onOk () {
     
      return new Promise((resolve, reject) => {
     
        const res = _this.confirmOnOk(resolve, reject, mockId)
        return res
      }).catch(() => console.log('  !'))
    },
    autoFocusButton: null
  })
},
//               --      、                     ，             。
confirmOnOk (resolve, reject, mockId) {
     
  const param = {
     
    mockId
  }
  delItem(param).then(res => {
     
    resolve() //       ，   promise   resolve          
    if (res.code === 200) {
     
      this.$message.success(res.msg)
	  //          
    } else {
     
      this.$message.error(res.msg, 5)
    }
  })
}