Vue$confirm的詳細闡述

一、Vue$confirm的作用

Vue$confirm是一個非常實用的Vue.js插件，它提供了一個簡單易用的確認框組件，可以用於在用戶執行某個敏感操作之前進行二次確認，以防止誤操作。如刪除操作、修改等。

Vue$confirm可以根據傳入的參數，自動構建一個確認框，並且支持自定義樣式、內容、按鈕等。同時，它還可以根據不同的情況返回一個Promise對象，以便在用戶點擊確定或取消後執行相應的操作。

二、使用Vue$confirm

Vue$confirm的用法非常簡單，只需要在Vue實例中引入它，並調用它即可。

Vue.prototype.$confirm = function (text, title, options = {}) {
  return new Promise((resolve, reject) => {
    try {
      const confirmConstructor = Vue.extend(Confirm)
      const confirmInstance = new confirmConstructor({
        el: document.createElement('div'),
        propsData: {
          title: title,
          text: text,
          type: options.type,
          showModalIcon: options.showModalIcon,
          cancelButtonText: options.cancelButtonText || '取消',
          confirmButtonText: options.confirmButtonText || '確定',
        },
        methods: {
          handleCancel() {
            resolve(false)
          },
          handleConfirm() {
            resolve(true)
          }
        }
      })
      document.body.appendChild(confirmInstance.$el)
    } catch (error) {
      reject(error)
    }
  })
}

上述代碼中，我們將Vue的原型對象中新增了一個$confirm方法，該方法接收3個參數：

• text：確認框中的提示文本
• title：確認框的標題
• options：可選的配置參數，如類型、文字等

在Vue實例中調用$confirm方法即可彈出確認框。

this.$confirm('確定要刪除嗎？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點擊確定後執行的操作
}).catch(() => {
  // 用戶點擊取消後執行的操作
})

在上述代碼中，我們調用$confirm方法彈出了一個提示框，詢問用戶是否確定執行刪除操作。如果用戶點擊確定，則執行delete方法；如果用戶點擊取消，則不執行任何操作。

三、Vue$confirm的自定義

Vue$confirm還支持多種用戶自定義，下面我們就來一一介紹：

1. 自定義樣式

我們可以通過傳入CSS類名來自定義樣式，如下代碼：

this.$confirm('確定要刪除嗎？', '提示', {
  type: 'warning',
  confirmButtonText: '刪除',
  cancelButtonText: '取消',
  customClass: 'my-custom-class'
}).then(() => {
  this.delete() // 用戶點擊確定後執行的操作
}).catch(() => {
  // 用戶點擊取消後執行的操作
})

上述代碼中，我們傳入了一個名為「my-custom-class」的CSS類名，以自定義樣式。

2. 自定義文字

我們可以通過傳入confirmButtonText和cancelButtonText屬性來自定義確認框中按鈕的文字，如下代碼：

this.$confirm('確定要刪除嗎？', '提示', {
  type: 'warning',
  confirmButtonText: '刪除',
  cancelButtonText: '取消',
}).then(() => {
  this.delete() // 用戶點擊確定後執行的操作
}).catch(() => {
  // 用戶點擊取消後執行的操作
})

上述代碼中，我們通過傳入confirmButtonText和cancelButtonText屬性來自定義確認框中按鈕的文字。

3. 自定義標題

我們可以通過傳入title屬性來自定義確認框的標題，如下代碼：

this.$confirm('確定要刪除嗎？', '溫馨提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點擊確定後執行的操作
}).catch(() => {
  // 用戶點擊取消後執行的操作
})

上述代碼中，我們通過傳入title屬性來自定義確認框的標題。

4. 自定義類型

Vue$confirm支持多種類型的確認框，包括警告框、提醒框、成功框等，相關配置項如下表所示：

我們可以通過傳入type屬性來自定義確認框的類型，如下代碼：

this.$confirm('確定要刪除嗎？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點擊確定後執行的操作
}).catch(() => {
  // 用戶點擊取消後執行的操作
})

上述代碼中，我們通過傳入type屬性來自定義確認框的類型為「warning」。

5.自定義圖標

我們可以通過傳入showModalIcon屬性來自定義確認框的圖標，默認為true，如下代碼：

this.$confirm('你確定要離開嗎？', '提示', {
  showModalIcon: false
  })

上述代碼中，我們通過傳入showModalIcon屬性並將值設置為false來關閉默認的圖標。