前言

每个按钮都要单独定义一个loading变量，并且在接口请求前修改为true，接口响应后再修改为false，封装后这段重复的逻辑就可以统一管理不用每次都写一遍了。

效果

新建一个公共的src\common.ts

import { ref } from "vue"export function useBtnLoading() {const isLoading = ref(false)const handleClick = async (action: () => Promise<void>) => {isLoading.value = truetry {await action()} finally {isLoading.value = false}}return {isLoading,handleClick,}
}

页面中使用

<el-button type="primary" :loading="btnLoading" @click="btnClick">提交</el-button>

import { useBtnLoading } from '@/utils/common'const { isLoading: btnLoading, handleClick } = useBtnLoading();const btnClick = () => {handleClick(() => reqFn())
}const reqFn = () => {// 模拟调用接口return new Promise((resolve, reject) => {setTimeout(() => resolve(123), 2000);});
}