国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > Vue$confirm的詳細闡述

Vue$confirm的詳細闡述

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-24 19:33:21 1700825601

一、Vue$confirm的作用

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

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

二、使用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個參數(shù):

text:確認框中的提示文本 title:確認框的標題 options:可選的配置參數(shù),如類型、文字等

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


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

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

三、Vue$confirm的自定義

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

1. 自定義樣式

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


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

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

2. 自定義文字

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


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

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

3. 自定義標題

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


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

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

4. 自定義類型

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

類型 描述 參數(shù)
warning 警告框 類型為“warning”
info 提醒框 類型為“info”
success 成功框 類型為“success”
error 錯誤框 類型為“error”

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


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

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

5.自定義圖標

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


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

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

聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
10年以上業(yè)內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT