一、Vue$confirm的作用

Vue$confirm是一個(gè)非常實(shí)用的Vue.js插件，它提供了一個(gè)簡(jiǎn)單易用的確認(rèn)框組件，可以用于在用戶執(zhí)行某個(gè)敏感操作之前進(jìn)行二次確認(rèn)，以防止誤操作。如刪除操作、修改等。

Vue$confirm可以根據(jù)傳入的參數(shù)，自動(dòng)構(gòu)建一個(gè)確認(rèn)框，并且支持自定義樣式、內(nèi)容、按鈕等。同時(shí)，它還可以根據(jù)不同的情況返回一個(gè)Promise對(duì)象，以便在用戶點(diǎn)擊確定或取消后執(zhí)行相應(yīng)的操作。

二、使用Vue$confirm

Vue$confirm的用法非常簡(jiǎn)單，只需要在Vue實(shí)例中引入它，并調(diào)用它即可。

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的原型對(duì)象中新增了一個(gè)$confirm方法，該方法接收3個(gè)參數(shù)：

在Vue實(shí)例中調(diào)用$confirm方法即可彈出確認(rèn)框。

this.$confirm('確定要?jiǎng)h除嗎？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點(diǎn)擊確定后執(zhí)行的操作
}).catch(() => {
  // 用戶點(diǎn)擊取消后執(zhí)行的操作
})

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

三、Vue$confirm的自定義

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

1. 自定義樣式

我們可以通過(guò)傳入CSS類(lèi)名來(lái)自定義樣式，如下代碼：

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

上述代碼中，我們傳入了一個(gè)名為“my-custom-class”的CSS類(lèi)名，以自定義樣式。

2. 自定義文字

我們可以通過(guò)傳入confirmButtonText和cancelButtonText屬性來(lái)自定義確認(rèn)框中按鈕的文字，如下代碼：

this.$confirm('確定要?jiǎng)h除嗎？', '提示', {
  type: 'warning',
  confirmButtonText: '刪除',
  cancelButtonText: '取消',
}).then(() => {
  this.delete() // 用戶點(diǎn)擊確定后執(zhí)行的操作
}).catch(() => {
  // 用戶點(diǎn)擊取消后執(zhí)行的操作
})

上述代碼中，我們通過(guò)傳入confirmButtonText和cancelButtonText屬性來(lái)自定義確認(rèn)框中按鈕的文字。

3. 自定義標(biāo)題

我們可以通過(guò)傳入title屬性來(lái)自定義確認(rèn)框的標(biāo)題，如下代碼：

this.$confirm('確定要?jiǎng)h除嗎？', '溫馨提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點(diǎn)擊確定后執(zhí)行的操作
}).catch(() => {
  // 用戶點(diǎn)擊取消后執(zhí)行的操作
})

上述代碼中，我們通過(guò)傳入title屬性來(lái)自定義確認(rèn)框的標(biāo)題。

4. 自定義類(lèi)型

Vue$confirm支持多種類(lèi)型的確認(rèn)框，包括警告框、提醒框、成功框等，相關(guān)配置項(xiàng)如下表所示：

我們可以通過(guò)傳入type屬性來(lái)自定義確認(rèn)框的類(lèi)型，如下代碼：

this.$confirm('確定要?jiǎng)h除嗎？', '提示', {
  type: 'warning'
}).then(() => {
  this.delete() // 用戶點(diǎn)擊確定后執(zhí)行的操作
}).catch(() => {
  // 用戶點(diǎn)擊取消后執(zhí)行的操作
})

上述代碼中，我們通過(guò)傳入type屬性來(lái)自定義確認(rèn)框的類(lèi)型為“warning”。

5.自定義圖標(biāo)

我們可以通過(guò)傳入showModalIcon屬性來(lái)自定義確認(rèn)框的圖標(biāo)，默認(rèn)為true，如下代碼：

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

上述代碼中，我們通過(guò)傳入showModalIcon屬性并將值設(shè)置為false來(lái)關(guān)閉默認(rèn)的圖標(biāo)。