stmms-web/src/components/QmButton.vue

<template>
  <!-- TODO: 应该用注释的这段代码的，但是从 vue 3.1.5 升级到 3.2.1 时这里出错了 -->
  <!-- <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template> -->
  <a-button v-bind="newAttrs" :loading="inInterval.value" @click="insideClick">
    <slot name="default" />
  </a-button>
</template>

<script lang="ts">
import { reactive, ref } from "@vue/reactivity";

// 默认loading一秒，以免重复点击
export default {
  name: "QmButton",
  inheritAttrs: false,
  props: {
    clickTimeout: { type: Number, required: false, default: 1000 },
  },
  // @ts-ignore
  setup(props, { attrs }) {
    let newAttrs = reactive({});
    Object.assign(newAttrs, attrs);
    let parentOnClick = attrs.onClick;
    // @ts-ignore
    delete newAttrs["onClick"];

    let inInterval = ref(false);
    const insideClick = (e: MouseEvent) => {
      inInterval.value = true;
      setTimeout(() => (inInterval.value = false), props.clickTimeout);
      parentOnClick(e);
    };
    // newAttrs.onClick = insideClick;

    return { newAttrs, inInterval, insideClick };
  },
};
</script>