vue3與elementui封裝一個(gè)便捷Loading
前言
因?yàn)楹笈_(tái)管理,總要寫很多l(xiāng)oading狀態(tài)的變量,然后控制開啟和關(guān)閉。。我個(gè)人很討厭寫這種重復(fù)的代碼。。所以為了少寫點(diǎn)這種變量,所以突發(fā)奇想封裝一個(gè),目前感覺還是挺好用的,沒出啥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' // 過濾表單 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)騰訊云視頻上傳功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01Vue.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-05Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例
這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04