组件封装场景

按钮被频繁点击，导致一个请求被频繁触发应该怎么办

1. 防抖节流

但是会有一个问题如果防抖一秒，但是接口突然意外三秒才返回，用户在一秒后没拿到结果又开始疯狂点击，防抖的时间限制约束了在这种场景没办法得到一个通用

2. 锁

可行，只要没有拿到接口的结果就禁用点击请求

而且一般这种场景应用都会比较频繁，为了通用性，可以干脆封装成一个组件。

v-bind="$attrs"可以使得父组件传入的属性除了被明确props定义的，都直接透传到el-plus-button上

<template>
  <div>
    <el-plus-button v-bind="$attrs" @click="clickFn" />
  </div>
</template>
<script setup lang="ts">
import { ref, Ref, defineOptions } from "vue";
import { ElButton as ElPlusButton } from "element-plus";

defineOptions({
  inheritAttrs: false,
});

const props = withDefaults(
  defineProps<{
    asyncFn?: () => Promise<void>;
  }>(),
  {
    asyncFn: async () => {},
  }
);

const Loading: Ref<boolean> = ref(false);
const clickFn = async () => {
  if (!Loading.value) {
    Loading.value = true;
    await props.asyncFn();
    Loading.value = false;
  }
};
</script>