mark-web/src/components/QmButton.vue

<template>
  <!-- FIXED: 从 vue 3.1.5 升级到 3.2.1 时这里出错了，slot也要有key -->
  <a-button v-bind="newAttrs" :loading="inInterval" @click="insideClick">
    <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
      <slot :name="asAny(slot)" v-bind="asAny(scope)" :key="slot" />
    </template>
    <!-- <slot name="default" /> -->
  </a-button>
</template>

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

// 默认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;

    function asAny(input: any): any {
      return input as any;
    }
    return { newAttrs, inInterval, insideClick, asAny };
  },
};
</script>