点击遮罩层关闭

src/components/FormUI/nestedListGroup/index.vue

@@ -1,6 +1,6 @@
 <!-- 嵌套列表 -->
 <template>
-  <div style="height: 100vh; width: 100vw; position: fixed; top: 0; left: 0;" @click="show = false"></div>
+  <div v-if="cover" style="height: 100vh; width: 100vw; position: fixed; top: 0; left: 0;" @click="handleCover"></div>
   <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
     <div style="position: relative;">
       <v-text-field
@@ -25,10 +25,10 @@
         :counter="item.counter"
         :prepend-inner-icon="item.prependInnerIcon"
         :hide-details="item.hideDetails || false"
+        @focus.self="inputFocus"
         @update:modelValue="modelValueUpDate"
-        @click="show = !show"
       ></v-text-field>
-      <div v-show="show" style="position: absolute; top: 40; left: 0">
+      <div v-show="show" style="position: absolute; left: 0px">
         <v-card class="mt-n5 py-1" elevation="5">
           <listGroup
             :list="item.items"
@@ -91,7 +91,18 @@ const labelUpdateDeal = (txt) => {
   static_selectLabel = model_selectLabel.value = txt
 }
 
+const inputFocus = () => {
+  cover.value = true
+  show.value = true
+}
+const handleCover = () => {
+  show.value = false
+  cover.value = false
+}
+
 const show = ref(false)
+const cover = ref(false)
+// const top = ref('40px')
 </script>
 <style lang="scss" scoped>
 ::-webkit-scrollbar {