改进 选择提示

src/views/libraries/List.vue

@@ -2,27 +2,33 @@
   <v-container v-if="libraries.Data">
     <h1>资料库</h1>
 
+    {{ selected_ids }}
+
     <v-card>
       <v-list>
         <v-list-item
           v-for="item in libraries.Data"
           :key="item.ID"
-          @click="goto(item.ID)"
+          @click.stop="goto(item.ID)"
         >
-          <v-list-item-title>{{ item.Name }}</v-list-item-title>
+          <template v-slot:prepend="{ isActive }">
+            <v-list-item-action start>
+              <v-checkbox-btn
+                :model-value="isSelected(item.ID)"
+                @click.stop="toggleSelection(item.ID)"
+              ></v-checkbox-btn>
+            </v-list-item-action>
+          </template>
 
-          <v-list-item-action v-slots:append>
+          <template v-slot:append="{ isActive }">
-              <v-btn rounded="xl"  @click.prevent="goto(0)">
+            <v-list-item-action end>
+              <v-btn rounded="xl" @click.stop="console.log(isActive)">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
             </v-list-item-action>
-          <!-- <template v-slot:append="{ isActive }" @click.prevent>
+          </template>
-            <v-list-item-action v-slots:append>
+
-              <v-btn rounded="xl"  @click.prevent="goto(0)">
+          <v-list-item-title>{{ item.Name }}</v-list-item-title>
-                <v-icon>mdi-check</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </template> -->
         </v-list-item>
       </v-list>
     </v-card>
@@ -47,6 +53,7 @@
 
 <script setup>
 import { library } from "@/plugins/api";
+import { watch } from "vue";
 import { ref } from "vue";
 
 const page = ref(1);
@@ -64,4 +71,22 @@ load();
 const goto = (libraryId) => {
   console.log(libraryId);
 };
+
+const selected_ids = ref([]);
+
+
+function isSelected(id) {
+  return this.selected_ids.includes(id);
+}
+
+function toggleSelection(id) {
+  const index = this.selected_ids.indexOf(id);
+  if (index !== -1) {
+    // 如果已经选中，点击后移除
+    this.selected_ids.splice(index, 1);
+  } else {
+    // 如果没有选中，点击后添加
+    this.selected_ids.push(id);
+  }
+}
 </script>