dev

src/components/SearchInput.vue

@@ -1,23 +1,23 @@
 <template>
-
-  <el-popover placement="bottom-start" :visible="isVisible" :width="props.width" ref="popoverRef"
-              :trigger-keys="[]">
-    <template #reference>
   <el-input
       ref="inputRef"
+      style="width: 100%;height: 100%"
       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>
+  >
+
+  >
+  </el-input>
+
+  <el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef" :virtual-ref="inputRef"
+              :trigger-keys="[]">
     <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">