Vue3+TS项目给el-button统一封装一个点击后转圈效果的钩子函数按钮防抖

夏与冰

于 2024-09-12 20:35:23 发布

阅读量271

点赞数 1

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/qq_35641191/article/details/142180355

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

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