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

This commit is contained in:
xiaoxian521 2023-02-09 00:21:44 +08:00
parent d6ab5ad598
commit 5efba00330

View File

@ -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"