批量启用禁用

src/components/CommandCard.vue

@@ -1,6 +1,10 @@
 <template>
   <!-- mini 模式下如果命令未启用或者不可直接运行则隐藏卡片面板 -->
-  <div class="wrapper" v-show="!cardStyleVars.hideCard">
+  <div
+    class="wrapper"
+    v-show="!cardStyleVars.hideCard"
+    :id="commandInfo.features.code"
+  >
     <div>
       <!-- mini 模式下不显示各类按钮 -->
       <div v-show="cardStyleVars.showButtons">
@@ -10,6 +14,7 @@
             v-model="isCommandActivated"
             checked-icon="flash_on"
             color="orange-6"
+            @click="toggleCommandActivated"
           />
         </div>
         <!-- 选项按钮 -->
@@ -175,7 +180,6 @@
 </template>
 
 <script>
-
 export default {
   data() {
     return {
@@ -192,11 +196,6 @@ export default {
       },
     };
   },
-  watch: {
-    isCommandActivated() {
-      this.toggleCommandActivated();
-    },
-  },
   computed: {
     //   控制卡片样式的具体参数
     cardStyleVars() {
@@ -238,7 +237,7 @@ export default {
     cardStyle: Object,
   },
   mounted() {
-    console.log(this.commandInfo.features.code, this);
+    // console.log(this.commandInfo.features.code, this);
   },
   methods: {
     // 匹配类型太长的话截断

src/pages/ConfigurationPage.vue

@@ -67,7 +67,6 @@
             <CommandCard
               v-for="commandInfo in currentTagQuickCommands"
               :key="commandInfo.features.code"
-              :ref="commandInfo.features.code"
               :commandInfo="commandInfo"
               :activated="
                 activatedQuickCommandFeatureCodes.includes(
@@ -494,7 +493,7 @@ export default {
       this.currentTag = !tags || !tags.length ? "未分类" : tags[0];
       // 等待 dom 渲染
       this.$nextTick(() => {
-        this.$refs[code][0].$el.nextElementSibling.scrollIntoViewIfNeeded();
+        document.getElementById(code).scrollIntoViewIfNeeded();
       });
     },
     // 全部导出
@@ -569,15 +568,17 @@ export default {
     },
     // 启用全部
     enableAllCommands() {
-      for (var key in this.$refs) {
-        this.$refs[key][0].isCommandActivated = true;
-      }
+      // dom 操作
+      document
+        .querySelectorAll(".q-toggle[aria-checked='false']")
+        .forEach((x) => x.click());
     },
     // 禁用全部
     disableAllCommands() {
-      for (var key in this.$refs) {
-        this.$refs[key][0].isCommandActivated = false;
-      }
+      // dom 操作
+      document
+        .querySelectorAll(".q-toggle[aria-checked='true']")
+        .forEach((x) => x.click());
     },
   },
 };