UI更新

src/components/EditOption.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   itemIndex: {
     type: Number,
@@ -21,6 +21,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  value: {
+    type: String,
+    default: "",
+  },
 });
 const bowTypes = [
   {
@@ -96,6 +100,36 @@ const onMeterChange = (e) => {
   meter.value = e.detail.value;
   props.onSelect(props.itemIndex, e.detail.value);
 };
+watch(
+  () => props.value,
+  (newValue) => {
+    if (!newValue) return;
+    if (props.itemIndex === 0) {
+      bowTypes.forEach((item, index) => {
+        if (item.name === newValue) {
+          selectedIndex.value = index;
+        }
+      });
+    }
+    if (props.itemIndex === 1) {
+      distances.forEach((item, index) => {
+        if (item == newValue) {
+          selectedIndex.value = index;
+        }
+        if (selectedIndex.value === -1) {
+          meter.value = newValue;
+        }
+      });
+    }
+    if (props.itemIndex === 2) {
+      bowtargetTypes.forEach((item, index) => {
+        if (item === newValue) {
+          selectedIndex.value = index;
+        }
+      });
+    }
+  }
+);
 </script>
 
 <template>
@@ -112,21 +146,13 @@ const onMeterChange = (e) => {
       }}</text>
       <block>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
-          bowTypes[selectedIndex]
-            ? bowTypes[selectedIndex].name
-            : itemTexts[itemIndex]
+          value || itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
-          distances[selectedIndex]
-            ? distances[selectedIndex] + " 米"
-            : selectedIndex === 9
-            ? meter + " 米"
-            : itemTexts[itemIndex]
+          value ? value + "米" : itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
-          bowtargetTypes[selectedIndex]
-            ? bowtargetTypes[selectedIndex]
-            : itemTexts[itemIndex]
+          value || itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
           selectedIndex !== -1 && secondSelectIndex !== -1
@@ -174,6 +200,7 @@ const onMeterChange = (e) => {
         }"
       >
         <input
+          v-model="meter"
           placeholder="自定义"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"