前言
因为后台管理，总要写很多loading状态的变量，然后控制开启和关闭。。我个人很讨厌写这种重复的代码。。所以为了少写点这种变量，所以突发奇想封装一个，目前感觉还是挺好用的，没出啥bug。。。在表格中也能运用自如。。喜欢的话，可以复制到你自己的项目拿去用，记得点个赞噢
实际使用
代码实现
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 = '是否进行提交',
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 }到此这篇关于vue3与elementui封装一个便捷Loading的文章就介绍到这了,更多相关vue3封装Loading内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！