fix(菜单搜索): 修复搜索页面多出一个搜索框的问题

pig-mesh · Jul 22, 2024 · dbd35ce · dbd35ce
1 parent cfeff51
commit dbd35ce
Showing 1 changed file with 74 additions and 73 deletions.
diff --git a/src/layout/navBars/breadcrumb/search.vue b/src/layout/navBars/breadcrumb/search.vue
@@ -1,30 +1,30 @@
 <template>
-	<div class="layout-search-dialog">
-		<el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
-			<template #footer>
-				<el-autocomplete
-					v-model="state.menuQuery"
-					:fetch-suggestions="menuSearch"
-					:placeholder="$t('user.searchPlaceholder')"
-					ref="layoutMenuAutocompleteRef"
-					@select="onHandleSelect"
-					:fit-input-width="true"
-				>
-					<template #prefix>
-						<el-icon class="el-input__icon">
-							<ele-Search />
-						</el-icon>
-					</template>
-					<template #default="{ item }">
-						<div>
-							<SvgIcon :name="item.meta.icon" class="mr5" />
-							{{ $t(item.name) }}
-						</div>
-					</template>
-				</el-autocomplete>
-			</template>
-		</el-dialog>
-	</div>
+  <div class="layout-search-dialog">
+    <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
+      <template #footer>
+        <el-autocomplete
+            v-model="state.menuQuery"
+            :fetch-suggestions="menuSearch"
+            :placeholder="$t('user.searchPlaceholder')"
+            ref="layoutMenuAutocompleteRef"
+            @select="onHandleSelect"
+            :fit-input-width="true"
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <ele-Search />
+            </el-icon>
+          </template>
+          <template #default="{ item }">
+            <div>
+              <SvgIcon :name="item.meta.icon" class="mr5" />
+              {{ $t(item.name) }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbSearch">
@@ -38,80 +38,81 @@ const layoutMenuAutocompleteRef = ref();
 const { t } = useI18n();
 const router = useRouter();
 const state = reactive<SearchState>({
-	isShowSearch: false,
-	menuQuery: '',
-	tagsViewList: [],
+  isShowSearch: false,
+  menuQuery: '',
+  tagsViewList: [],
 });
 
 // 搜索弹窗打开
 const openSearch = () => {
-	state.menuQuery = '';
-	state.isShowSearch = true;
-	initTageView();
-	nextTick(() => {
-		setTimeout(() => {
-			layoutMenuAutocompleteRef.value.focus();
-		});
-	});
+  state.menuQuery = '';
+  state.isShowSearch = true;
+  initTageView();
+  nextTick(() => {
+    setTimeout(() => {
+      layoutMenuAutocompleteRef.value.focus();
+    });
+  });
 };
 // 搜索弹窗关闭
 const closeSearch = () => {
-	state.isShowSearch = false;
+  state.isShowSearch = false;
 };
 // 菜单搜索数据过滤
 const menuSearch = (queryString: string, cb: Function) => {
-	let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
-	cb(results);
+  let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
+  cb(results);
 };
 // 菜单搜索过滤
 const createFilter = (queryString: string) => {
-	return (restaurant: RouteItem) => {
-		return restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || t(restaurant!.name!).indexOf(queryString.toLowerCase()) > -1;
-	};
+  return (restaurant: RouteItem) => {
+    return restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || t(restaurant!.name!).indexOf(queryString.toLowerCase()) > -1;
+  };
 };
 // 初始化菜单数据
 const initTageView = () => {
-	if (state.tagsViewList.length > 0) return false;
-	tagsViewRoutes.value.map((v: RouteItem) => {
-		if (!v.meta?.isHide) state.tagsViewList.push({ ...v });
-	});
+  if (state.tagsViewList.length > 0) return false;
+  tagsViewRoutes.value.map((v: RouteItem) => {
+    if (!v.meta?.isHide) state.tagsViewList.push({ ...v });
+  });
 };
 // 当前菜单选中时
 const onHandleSelect = (item: RouteItem) => {
-	let { path, redirect } = item;
-	if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
-	else if (redirect) router.push(redirect);
-	else router.push(path);
-	closeSearch();
+  let { path, redirect } = item;
+  if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
+  else if (redirect) router.push(redirect);
+  else router.push(path);
+  closeSearch();
 };
 
 // 暴露变量
 defineExpose({
-	openSearch,
+  openSearch,
 });
 </script>
 
 <style scoped lang="scss">
 .layout-search-dialog {
-	position: relative;
-	:deep(.el-dialog) {
-		.el-dialog__header,
-		.el-dialog__body {
-			display: none;
-		}
-		.el-dialog__footer {
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			top: -53vh;
-		}
-	}
-	:deep(.el-autocomplete) {
-		width: 560px;
-		position: absolute;
-		top: 150px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
+  position: relative;
+  :deep(.el-dialog) {
+    width: 560px;
+    .el-dialog__header,
+    .el-dialog__body {
+      display: none;
+    }
+    .el-dialog__footer {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -53vh;
+    }
+  }
+  :deep(.el-autocomplete) {
+    position: absolute;
+    width: 560px;
+    top: 53vh;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 </style>