Vue$confirm的詳細(xì)闡述

一、Vue$confirm的作用

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

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

二、使用Vue$confirm

Vue$confirm的用法非常簡單，只需要在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的原型對象中新增了一個$confirm方法，該方法接收3個參數(shù)：

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

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

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

三、Vue$confirm的自定義

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

1. 自定義樣式

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

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

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

2. 自定義文字

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

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

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

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

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

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

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

4. 自定義類型

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

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

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

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

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

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

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

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