From 924121953fb670fd3c2278fffc26b65b57620110 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 06 八月 2024 16:50:14 +0800
Subject: [PATCH] 英语书整本Bug修改结束

---
 src/components/dropdown/index.vue |   75 +++++++++++++++++++------------------
 1 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/components/dropdown/index.vue b/src/components/dropdown/index.vue
index b352e5c..7e50256 100644
--- a/src/components/dropdown/index.vue
+++ b/src/components/dropdown/index.vue
@@ -1,33 +1,18 @@
 <template>
   <div class="dropdown">
-    <div class="selected-option" >
+    <div class="selected-option">
       <div class="selected-values">
-        <span
-          v-for="(option, index) in selectedOptions"
-          :key="index"
-          class="selected-value"
-        >
+        <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value">
           <span class="selected-value-txt">{{ option }}</span>
           <span class="delete" @click="removeOption(option)"> &times; </span>
         </span>
       </div>
-      <input
-        type="text"
-        v-model="searchText"
-        placeholder="璇烽�夋嫨閫夐」"
-        @input="filterOptions"
-        v-if="isShowSearch"
-      />
+      <input type="text" v-model="searchText" placeholder="璇烽�夋嫨閫夐」" @input="filterOptions" v-if="isShowSearch" />
       <span class="arrow" @click="toggleDropdown"></span>
     </div>
-
     <!-- <button class="confirm-button" @click="submitSelection">纭</button> -->
     <ul v-if="showDropdown" class="options-list">
-      <li
-        v-for="option in filteredOptions"
-        :key="option"
-        @click="toggleOption(option)"
-      >
+      <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)">
         <input type="checkbox" :value="option" :checked="isSelected(option)" />
         <label>{{ option }}</label>
       </li>
@@ -37,13 +22,16 @@
 
 <script>
 export default {
-  props:{
-    options:{
-      type:Array
+  props: {
+    options: {
+      type: Array
     },
-    isShowSearch:{
-      type:Boolean,
-      default:false
+    value: {
+      type: Array
+    },
+    isShowSearch: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -54,6 +42,7 @@
       searchText: "", // 杩囨护閫夐」鐨勬悳绱㈡枃鏈�
       // ...
       showConfirmButton: false,
+      selected: this.value
     };
   },
   computed: {
@@ -62,15 +51,22 @@
         option.toLowerCase().includes(this.searchText.toLowerCase())
       );
     },
-    
+
   },
-  watch:{
-    selectedOptions:{
+  watch: {
+    value: {
+      deep: true, // 娣卞害鐩戣(閽堝澶嶆潅绫诲瀷)
+      immediate: true, // 鏄惁绔嬪埢鎵ц涓�娆andler
       handler(newValue) {
-        console.log('閫変腑椤瑰彉鍖�',newValue);
-        this.$emit('changeDropdownData',newValue)
+        this.selectedOptions = newValue
+      
       }
-    },deep:true
+    },
+    selectedOptions: {
+      handler(newValue) {
+        this.$emit('changeDropdownData', newValue)
+      }
+    }, deep: true
   },
   methods: {
     toggleDropdown() {
@@ -92,8 +88,6 @@
       }
     },
     submitSelection() {
-      // 鍦ㄨ繖閲屽鐞嗘彁浜ら�夐」鐨勯�昏緫
-      console.log("宸查�夋嫨鐨勯�夐」:", this.selectedOptions);
       // 閲嶇疆閫夐」骞堕殣钘忕‘璁ゆ寜閽�
       this.selectedOptions = [];
       this.showConfirmButton = false;
@@ -105,10 +99,14 @@
       this.showDropdown = true;
     },
     //鏆撮湶
-     changeSelectData(value){
+    changeSelectData(value) {
       this.selectedOptions = value
-
-  }
+    },
+    handleChange(event) {
+      // 褰撻�変腑椤瑰彉鍖栨椂瑙﹀彂  
+      // 閫氱煡鐖剁粍浠舵柊鐨勯�変腑鍊�  
+      this.$emit('changeDropdownData', event.target.value);
+    },
   },
 };
 </script>
@@ -127,6 +125,7 @@
   right: -31%;
   top: -21%;
 }
+
 .dropdown {
   min-width: 200px;
   position: relative;
@@ -163,14 +162,16 @@
   margin-right: 4px;
   margin-bottom: 4px;
 }
+
 .selected-value .selected-value-txt {
   height: 24px;
-    display: inline-block;
+  display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 80px;
 }
+
 .selected-value .delete {
   margin-left: 4px;
   cursor: pointer;

--
Gitblit v1.9.1