一、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來關閉默認的圖標。