前言

每个按钮都要单独定义一个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 = true
    try {
      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);
  });
}