fix: 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题

src/layout/components/search/components/SearchModal.vue

@@ -5,8 +5,8 @@ import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
+import { ref, computed, shallowRef } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
-import { ref, watch, computed, nextTick, shallowRef } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import Search from "@iconify-icons/ep/search";
 
@@ -44,14 +44,6 @@ const show = computed({
   }
 });
 
-watch(show, async val => {
-  if (val) {
-    /** 自动聚焦 */
-    await nextTick();
-    inputRef.value?.focus();
-  }
-});
-
 /** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
 function flatTree(arr) {
   const res = [];
@@ -135,9 +127,11 @@ onKeyStroke("ArrowDown", handleDown);
 <template>
   <el-dialog
     top="5vh"
-    :width="device === 'mobile' ? '80vw' : '50vw'"
     v-model="show"
+    :width="device === 'mobile' ? '80vw' : '50vw'"
     :before-close="handleClose"
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
   >
     <el-input
       ref="inputRef"