dev

src/components/SearchInput.vue

@@ -1,23 +1,23 @@
 <template>
+  <el-input
+      ref="inputRef"
+      style="width: 100%;height: 100%"
+      v-model="keyword"
+      :prefix-icon="Plus"
+      :placeholder="props.placeholder"
+      clearable
+      @input="changeInput"
+      class="no-border-input"
+      :disabled="disabled"
+      @focus="focus"
+      @click="changeInput"
+  >
 
-  <el-popover placement="bottom-start" :visible="isVisible" :width="props.width" ref="popoverRef"
+  >
+  </el-input>
+
+  <el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef" :virtual-ref="inputRef"
               :trigger-keys="[]">
-    <template #reference>
-      <el-input
-          ref="inputRef"
-          v-model="keyword"
-          :prefix-icon="Plus"
-          :placeholder="props.placeholder"
-          :style="{ width: props.width + 'px' }"
-          clearable
-          @input="changeInput"
-          class="no-border-input"
-          :disabled="disabled"
-          @focus="focus"
-          @blur="handlerBlur"
-          @click="changeInput"
-      />
-    </template>
     <div class="container">
       <el-table
           :data="searchList" style="width: 100%"
@@ -34,18 +34,16 @@
       </el-table>
     </div>
   </el-popover>
-
 </template>
 
-<script setup lang="ts">
-import {ref, unref} from "vue";
+<script setup lang="ts">import {ref, unref} from "vue";
 import {post} from "@/utils/request.ts";
 import {Plus} from "@element-plus/icons-vue";
 
 const keyword = ref("");
 const popoverRef = ref();
 const inputRef = ref();
-const isVisible = ref(false);
+
 interface showConfig {
   prop: string;
   label: string;
@@ -56,6 +54,10 @@ const props = defineProps({
     type: String,
     default: ""
   },
+  width: {
+    type: Number,
+    default: 1000
+  },
   showConfig: {
     type: Array as () => showConfig[],
     default: () => []
@@ -102,13 +104,8 @@ const beforeShow = () => {
 };
 
 const focus=()=>{
-  isVisible.value=true
-  console.log( "focus输入框")
   emit('focus',true)
 }
-const handlerBlur = () => {
-  isVisible.value = false
-}
 </script>
 
 <style scoped lang="scss">