Vue2 的對話框 - daniel-qa/Vue GitHub Wiki

Vue2 的對話框

handleAuthModeChange(mode) {
  // 跳出確認對話框
  this.$confirm(
    '您確定要切換授權模式嗎？',   // 內容訊息 (硬編碼)
    '確認操作',                   // 標題 (硬編碼)
    {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // 使用者按下「確定」

      if (mode === 'auto') {
        const canUse = this.avaliable - this.allocated;

        if (canUse === 0 || this.unauthorizedTeachers.length > canUse) {
          // 資源不足的錯誤訊息 (硬編碼)
          this.$message.error('可用授權資源不足！');
          this.$nextTick(() => {
            this.authMode = 'manual';
          });
          return;
        }

        // 執行自動授權邏輯
        this.executeAutoAuthorization();
      } else if (mode === 'manual') {
        // 執行手動授權模式
        this.handleManualMode();
      }
    })
    .catch(() => {
      // 使用者按下「取消」

      // 取消操作的提示訊息 (硬編碼)
      this.$message.info('操作已取消');
      // 回復原本狀態
      this.$nextTick(() => {
        this.authMode = this.authMode === 'auto' ? 'manual' : 'auto';
      });
    });
}

• 補充小重點：

this.$confirm() 是 Element UI 提供的 全域方法，回傳一個 Promise。

.then() → 點「確認」

.catch() → 點「取消」或關閉視窗