vue3+elementui封裝一個便捷Loading

---

theme: channing-cyan

初衷

因為後台管理，總要寫很多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 {

}

interface UpdateLoadingType {

}

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 } ```