封装qm-button组件

src/components/QmButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <a-button v-bind="newAttrs" :loading="inInterval" @click="insideClick">
+    <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </a-button>
+</template>
+
+<script>
+import { reactive, ref } from "@vue/reactivity";
+
+// 默认loading一秒，以免重复点击
+export default {
+  name: "QmButton",
+  inheritAttrs: false,
+  setup(props, { attrs }) {
+    let newAttrs = reactive({});
+    Object.assign(newAttrs, attrs);
+    let parentOnClick = attrs.onClick;
+    delete newAttrs["onClick"];
+
+    let inInterval = ref(false);
+    const insideClick = (e) => {
+      inInterval.value = true;
+      setTimeout(() => (inInterval.value = false), 1000);
+      parentOnClick(e);
+    };
+    // newAttrs.onClick = insideClick;
+
+    return { newAttrs, inInterval, insideClick };
+  },
+};
+</script>

src/features/mark/MarkBoardKeyBoard.vue

@@ -67,7 +67,6 @@ import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
 import { message } from "ant-design-vue";
-import { duration } from "moment";
 
 export default defineComponent({
   name: "MarkBoardKeyBoard",

src/main.ts

@@ -6,6 +6,7 @@ import router from "@/router";
 import filters from "@/filters";
 import Antd from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
+import QmButton from "@/components/QmButton.vue";
 
 // if(process.env.NODE_ENV)
 // console.log(import.meta.env.DEV);
@@ -13,6 +14,9 @@ const app = createApp(App);
 app.use(router);
 app.use(Antd);
 app.config.globalProperties.$filters = filters;
+
+app.component("qm-button", QmButton);
+
 if (import.meta.env.DEV) {
   initLogin().then(() => {
     app.mount("#app");

src/plugins/customComponents.js

@@ -1,10 +0,0 @@
-import Vue from "vue";
-// import AppType from "@/components/common/AppType.vue";
-
-const components = {
-  //  AppType,
-};
-
-Object.keys(components).forEach((key) => {
-  Vue.component(key, components[key]);
-});

src/plugins/customComponents.ts

@@ -0,0 +1,10 @@
+// import {} from "vue";
+// // import AppType from "@/components/common/AppType.vue";
+
+// const components = {
+//   //  AppType,
+// };
+
+// Object.keys(components).forEach((key) => {
+//   App.component(key, components[key]);
+// });

src/types/global.d.ts

@@ -1,4 +1,4 @@
-import Vue, { ComponentCustomProperties } from "vue";
+import { ComponentCustomProperties } from "vue";
 import filters from "@/filters";
 import { default as message } from "ant-design-vue/lib/message";
 // import { default as notification } from "ant-design-vue/lib/notification";