瀏覽代碼

qm-button add default clickTimout prop

Michael Wang 4 年之前
父節點
當前提交
b62ece4043

+ 4 - 1
src/components/QmButton.vue

@@ -13,6 +13,9 @@ import { reactive, ref } from "@vue/reactivity";
 export default {
   name: "QmButton",
   inheritAttrs: false,
+  props: {
+    clickTimeout: { type: Number, required: false, default: 1000 },
+  },
   setup(props, { attrs }) {
     let newAttrs = reactive({});
     Object.assign(newAttrs, attrs);
@@ -22,7 +25,7 @@ export default {
     let inInterval = ref(false);
     const insideClick = (e) => {
       inInterval.value = true;
-      setTimeout(() => (inInterval.value = false), 1000);
+      setTimeout(() => (inInterval.value = false), props.clickTimeout);
       parentOnClick(e);
     };
     // newAttrs.onClick = insideClick;

+ 2 - 0
src/features/mark/MarkBoardTrack.vue

@@ -58,6 +58,7 @@
         type="primary"
         shape="round"
         size="large"
+        :clickTimeout="300"
         @click="clearLatestMarkOfCurrentQuetion"
       >
         回退
@@ -66,6 +67,7 @@
         type="primary"
         shape="round"
         size="large"
+        :clickTimeout="300"
         @click="clearAllMarksOfCurrentQuetion"
       >
         清除本题

+ 3 - 3
src/features/mark/MarkProblemDialog.vue

@@ -16,9 +16,9 @@
       <tr v-for="(problem, index) in store.setting.problemTypes" :key="index">
         <td>{{ problem.name }}</td>
         <td class="tw-text-right">
-          <qm-button type="primary" @click="chooseProblemType(problem.id)"
-            >选择</qm-button
-          >
+          <qm-button type="primary" @click="chooseProblemType(problem.id)">
+            选择
+          </qm-button>
         </td>
       </tr>
     </table>

+ 3 - 5
src/features/mark/MarkSwitchGroupDialog.vue

@@ -16,9 +16,9 @@
         <td>{{ group.title }}</td>
         <td>{{ progress(group.totalCount, group.markedCount) }}%</td>
         <td class="tw-text-right">
-          <QmButton type="primary" @click="chooseGroup(group.markerId)"
-            >选择</QmButton
-          >
+          <qm-button type="primary" @click="chooseGroup(group.markerId)">
+            选择
+          </qm-button>
         </td>
       </tr>
     </table>
@@ -29,13 +29,11 @@
 </template>
 <script lang="ts">
 import { doSwitchGroup, getGroups } from "@/api/markPage";
-import QmButton from "@/components/QmButton.vue";
 import { message } from "ant-design-vue";
 import { ref, defineComponent, onUpdated } from "vue";
 import { store } from "./store";
 
 export default defineComponent({
-  components: { QmButton },
   name: "MarkSwitchGroupDialog",
   setup() {
     const visible = ref<boolean>(false);