vue3與elementui封裝一個(gè)便捷Loading
前言
因?yàn)楹笈_(tái)管理,總要寫(xiě)很多l(xiāng)oading狀態(tài)的變量,然后控制開(kāi)啟和關(guān)閉。。我個(gè)人很討厭寫(xiě)這種重復(fù)的代碼。。所以為了少寫(xiě)點(diǎn)這種變量,所以突發(fā)奇想封裝一個(gè),目前感覺(jué)還是挺好用的,沒(méi)出啥bug。。。在表格中也能運(yùn)用自如。。喜歡的話,可以復(fù)制到你自己的項(xiàng)目拿去用,記得點(diǎn)個(gè)贊噢
實(shí)際使用


代碼實(shí)現(xiàn)
import { reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { isArray } from 'lodash-es'
// 過(guò)濾表單
import { filterForm } from '@/utils'
interface SubmitType {
loading?: string
params?: any
successText?: string
errorText?: string
message?: string
title?: string
}
interface SubmitParamsType {
loadingText?: string
params?: any
api: Function
success?: string
error?: string
submitMessage?: string
}
interface UpdateType {
loading?: string
params?: any
api?: Function
successText?: string
errorText?: string
}
interface CrudLoadingType {
[_submitLoading: string]: boolean
}
interface UpdateLoadingType {
[_updateLoading: string]: boolean
}
const submitDataHook = (context: SubmitType) => {
const {
loading = '_submitLoading',
successText = '操作成功',
errorText = '操作失敗',
message = '是否進(jìn)行提交',
title = '溫馨提示'
} = context
const submitLoading = reactive({}) as CrudLoadingType
const submitHook = ({
params,
api,
loadingText = loading,
success = successText,
error = errorText,
submitMessage = message
}: SubmitParamsType) => {
return new Promise((resolve, reject) => {
submitLoading[loadingText as string] = true
ElMessageBox.confirm(submitMessage, title)
.then(() => {
return api(isArray(params) ? params : filterForm(params))
.then((data) => {
ElMessage.success(success)
resolve(data)
return data
})
.catch((res) => {
reject(res)
if (res.code === '1' && !res.msg) {
ElMessage.error(error)
}
})
})
.catch(() => {
reject()
ElMessage.warning('取消操作')
})
.finally(() => {
submitLoading[loadingText as string] = false
})
})
}
return {
submitHook,
submitLoading
}
}
const updateData = (context: UpdateType) => {
const { loading = '_updateLoading', successText = '操作成功', errorText = '操作失敗' } = context
const updateLoading = reactive({ [loading]: false }) as UpdateLoadingType
const updateHook = ({
params,
api,
success = successText,
error = errorText,
loadingText = loading
}: SubmitParamsType) => {
updateLoading[loadingText] = true
return api(isArray(params) ? params : filterForm(params))
.then((data) => {
ElMessage.success(success)
return data
})
.catch((e) => {
ElMessage.error(error)
throw e
})
.finally(() => {
updateLoading[loadingText] = false
})
}
return {
updateHook,
updateLoading
}
}
export { submitDataHook, updateData }到此這篇關(guān)于vue3與elementui封裝一個(gè)便捷Loading的文章就介紹到這了,更多相關(guān)vue3封裝Loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能
這篇文章主要介紹了vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證,本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-05-05
Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例
這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04

