Vue3百度风格搜索框组件，使用vue3进行设计，亦有vue3+TS的版本。
vue3组件如下：

<template><!-- 搜索组件容器 --><div class="search-container"><!-- 百度Logo - 新样式 --><div class="logo-container"><h1 class="logo"><span class="logo-bai">qiandu</span><span class="logo-baidu">千度</span></h1><p class="search-hint">搜索一下,你可能也不知道呀</p></div><!-- 搜索框主体 --><div class="search-box" ref="searchBox"><!-- 输入框容器 --><div class="search-input-container"><!-- 核心搜索输入框:v-model绑定query实现双向数据绑定@input监听输入事件触发搜索建议@keydown监听键盘事件实现导航@focus获取焦点时显示建议列表--><inputtype="text"v-model="query"@input="handleInput"@keydown.down="onArrowDown"@keydown.up="onArrowUp"@keydown.enter="onEnter"@focus="showSuggestions = true"placeholder="请输入搜索关键词"class="search-input"/><!-- 清空按钮 - 仅在输入框有内容时显示 --><button v-if="query" @click="clearInput" class="clear-btn"><i class="fas fa-times"></i></button></div><!-- 搜索按钮 --><button @click="search" class="search-btn"><div class="camera-icon"></div><!-- <span class="soutu-btn"></span> --><i class="fas fa-search">search it!</i></button></div><!-- 搜索建议列表 --><div v-if="showSuggestions && suggestions.length > 0" class="suggestions"><!-- 遍历建议列表:点击建议项时触发搜索:class绑定active类实现键盘导航高亮 --><div v-for="(suggestion, index) in suggestions" :key="index"@click="selectSuggestion(suggestion)":class="['suggestion-item', { active: index === activeSuggestionIndex }]"><i class="fas fa-search suggestion-icon"></i><span>{{ suggestion }}</span></div></div><!-- 搜索历史记录 --><div v-if="showHistory && searchHistory.length > 0" class="history"><!-- 历史记录标题和清空按钮 --><div class="history-header"><span>搜索历史</span><button @click="clearHistory" class="clear-history-btn"><i class="fas fa-trash-alt"></i> 清空</button></div><!-- 遍历历史记录 --><div v-for="(item, index) in searchHistory" :key="index"@click="selectHistory(item)"class="history-item"><i class="fas fa-history history-icon"></i><span>{{ item }}</span></div></div></div>
</template><script setup>
// Vue Composition API 引入
import { ref, computed, onMounted, onUnmounted } from 'vue';// 响应式数据定义
const query = ref(''); // 搜索关键词
const suggestions = ref([]); // 搜索建议列表
const showSuggestions = ref(false); // 是否显示建议列表
const activeSuggestionIndex = ref(-1); // 当前激活的建议项索引
const searchHistory = ref([]); // 搜索历史记录
const showHistory = ref(true); // 是否显示历史记录
const searchBox = ref(null); // 搜索框DOM引用// 模拟的搜索建议数据（实际应用中应替换为API请求）
const mockSuggestions = ["vue3教程","vue3中文文档","vue3生命周期","vue3 composition api","vue3 vs vue2","vue3项目实战","vue3组件开发","vue3响应式原理","vue3路由配置","vue3状态管理"
];/*** 处理输入事件 - 当用户在搜索框中输入时触发*/
const handleInput = () => {// 如果搜索框为空，重置建议列表并显示历史记录if (!query.value) {suggestions.value = [];showSuggestions.value = false;showHistory.value = true;return;}// 模拟API请求 - 实际应用中这里应该发送请求到后端setTimeout(() => {// 过滤出包含搜索关键词的建议项（不区分大小写）suggestions.value = mockSuggestions.filter(item => item.toLowerCase().includes(query.value.toLowerCase()));// 显示建议列表showSuggestions.value = true;// 隐藏历史记录showHistory.value = false;// 重置激活建议项索引activeSuggestionIndex.value = -1;}, 200); // 200ms延迟模拟网络请求
};/*** 清空输入框内容*/
const clearInput = () => {query.value = '';suggestions.value = [];showSuggestions.value = false;showHistory.value = true;
};/*** 执行搜索操作*/
const search = () => {// 如果搜索内容为空则返回if (!query.value.trim()) return;// 添加到历史记录（避免重复）if (!searchHistory.value.includes(query.value)) {// 将新搜索词添加到历史记录开头searchHistory.value.unshift(query.value);// 最多保留10条历史记录if (searchHistory.value.length > 10) {searchHistory.value.pop();}// 将历史记录保存到localStoragelocalStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));}// 在实际应用中这里应该执行真正的搜索操作// 这里使用alert模拟搜索结果alert(`搜索: ${query.value}`);// 隐藏建议列表showSuggestions.value = false;
};/*** 选择搜索建议项* @param {string} suggestion - 选择的建议项*/
const selectSuggestion = (suggestion) => {// 将建议项内容填充到搜索框query.value = suggestion;// 执行搜索search();
};/*** 选择历史记录项* @param {string} item - 选择的历史记录项*/
const selectHistory = (item) => {// 将历史记录内容填充到搜索框query.value = item;// 执行搜索search();
};/*** 清空历史记录*/
const clearHistory = () => {// 清空历史记录数组searchHistory.value = [];// 从localStorage中移除历史记录localStorage.removeItem('searchHistory');
};/*** 键盘向下箭头事件处理* 用于在建议列表中向下导航*/
const onArrowDown = () => {if (activeSuggestionIndex.value < suggestions.value.length - 1) {activeSuggestionIndex.value++;}
};/*** 键盘向上箭头事件处理* 用于在建议列表中向上导航*/
const onArrowUp = () => {if (activeSuggestionIndex.value > 0) {activeSuggestionIndex.value--;}
};/*** 键盘回车事件处理* 用于执行搜索或选择当前建议项*/
const onEnter = () => {// 如果有激活的建议项，使用该建议项进行搜索if (activeSuggestionIndex.value >= 0 && suggestions.value.length > 0) {query.value = suggestions.value[activeSuggestionIndex.value];}// 执行搜索search();
};/*** 点击外部区域关闭建议列表* @param {Event} event - 点击事件对象*/
const handleClickOutside = (event) => {// 如果点击发生在搜索框外部，则关闭建议列表if (searchBox.value && !searchBox.value.contains(event.target)) {showSuggestions.value = false;}
};/*** 组件挂载生命周期钩子*/
onMounted(() => {// 从localStorage加载历史记录const savedHistory = localStorage.getItem('searchHistory');if (savedHistory) {searchHistory.value = JSON.parse(savedHistory);}// 添加全局点击事件监听器document.addEventListener('click', handleClickOutside);
});/*** 组件卸载生命周期钩子*/
onUnmounted(() => {// 移除全局点击事件监听器document.removeEventListener('click', handleClickOutside);
});
</script><style scoped>
.logo-container {text-align: center;margin-bottom: 20px;width: 100%;padding-top: 40px;
}.logo {display: flex;justify-content: center;align-items: flex-end;margin-bottom: 8px;height: 48px;
}.logo-bai {font-family: Arial, sans-serif;color: #000;font-size: 48px;font-weight: 600;letter-spacing: -1px;line-height: 0.8;padding-right: 3px;position: relative;top: -2px;
}.logo-baidu {font-family: "PingFang SC", "Microsoft YaHei", sans-serif;color: #3385ff;font-size: 44px;font-weight: 700;line-height: 1;letter-spacing: -1px;
}.slogan {font-size: 16px;color: #666;margin-bottom: 15px;font-weight: 400;line-height: 1.5;
}.search-hint {font-size: 18px;color: #3385ff;font-weight: bold;letter-spacing: 1px;position: relative;
}.search-hint::after {content: "";position: absolute;bottom: -5px;left: 50%;transform: translateX(-50%);width: 85px;height: 3px;background: linear-gradient(90deg, transparent, #3385ff, transparent);border-radius: 2px;
}/* 搜索组件容器样式 */
.search-container {display: flex;flex-direction: column;align-items: center;max-width: 800px;width: 100%;margin: 0 auto;padding: 20px;/* 渐变背景 */background: linear-gradient(180deg, #f1f1f1 0%, #f8f9fa 100px);min-height: 100vh;
}/* Logo容器样式 */
.logo-container {margin-bottom: 30px;
}/* Logo文字样式 */
.logo {font-size: 60px;font-weight: 700;letter-spacing: -4px;margin-bottom: 10px;/* 使用中文字体 */font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}/* 搜索框整体样式 */
.search-box {display: flex;width: 100%;max-width: 600px;height: 50px;border: 2px solid #3385ff; /* 百度蓝边框 */border-radius: 10px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */background: white;
}/* 输入框容器样式 */
.search-input-container {flex: 1;position: relative;display: flex;align-items: center;
}/* 输入框样式 */
.search-input {width: 100%;height: 100%;padding: 0 20px;border: none;outline: none;font-size: 16px;color: #333;
}/* 清空按钮样式 */
.clear-btn {position: absolute;right: 15px;background: none;border: none;color: #999;cursor: pointer;font-size: 16px;transition: color 0.2s; /* 颜色过渡效果 */
}/* 清空按钮悬停效果 */
.clear-btn:hover {color: #333;
}/* 搜索按钮样式 */
.search-btn {width: 100px;background: #3385ff; /* 百度蓝 */color: white;border: none;font-size: 16px;cursor: pointer;transition: background 0.3s; /* 背景色过渡效果 */
}/* 搜索按钮悬停效果 */
.search-btn:hover {background: #2a75e6; /* 深一点的蓝色 */
}/* 建议列表和历史记录容器样式 */
.suggestions, .history {width: 100%;max-width: 600px;margin-top: 5px;background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */overflow: hidden;
}/* 建议项和历史项通用样式 */
.suggestion-item, .history-item {padding: 12px 20px;display: flex;align-items: center;cursor: pointer;transition: background 0.2s; /* 背景色过渡效果 */
}/* 建议项悬停和激活状态样式 */
.suggestion-item:hover, .suggestion-item.active {background: #f5f7fa; /* 浅蓝色背景 */
}/* 历史项悬停效果 */
.history-item:hover {background: #f5f7fa;
}/* 图标样式 */
.suggestion-icon, .history-icon {margin-right: 15px;color: #999; /* 灰色图标 */font-size: 14px;
}/* 历史记录头部样式 */
.history-header {display: flex;justify-content: space-between;align-items: center;padding: 12px 20px;border-bottom: 1px solid #eee; /* 底部边框 */font-size: 14px;color: #666;
}/* 清空历史按钮样式 */
.clear-history-btn {background: none;border: none;color: #3385ff; /* 百度蓝 */cursor: pointer;font-size: 13px;display: flex;align-items: center;gap: 5px;
}/* 清空历史按钮悬停效果 */
.clear-history-btn:hover {text-decoration: underline; /* 下划线效果 */
}.soutu-btn {float: left;width: 20px;height: 20px;background: #fff url(https://www.baidu.com/img/soutu.png) no-repeat;background-size: contain;margin-right: 10px;background-position: 0 -51px;right: 30px;z-index: 1;position: relative;
}.camera-icon {width: 20px;height: 16px;position: absolute;background: #333; /* 相机主体颜色 */border-radius: 3px; /* 圆角 */margin-left: -30px;/* 镜头部分 */&::before {content: "";position: absolute;width: 10px;height: 10px;background: #fff;border: 2px solid #333;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 闪光灯部分 */&::after {content: "";position: absolute;width: 6px;height: 4px;background: #333;top: -3px;left: 50%;transform: translateX(-50%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 0 rgba(255,255,255,0.1);}
}
</style>

typescript代码如下：

<script setup lang="ts">
// Vue Composition API 引入
import { ref, onMounted, onUnmounted, type Ref } from 'vue';// 类型定义
type Suggestion = string;
type SearchHistory = string[];// 响应式数据定义
const query: Ref<string> = ref(''); // 搜索关键词
const suggestions: Ref<Suggestion[]> = ref([]); // 搜索建议列表
const showSuggestions: Ref<boolean> = ref(false); // 是否显示建议列表
const activeSuggestionIndex: Ref<number> = ref(-1); // 当前激活的建议项索引
const searchHistory: Ref<SearchHistory> = ref([]); // 搜索历史记录
const showHistory: Ref<boolean> = ref(true); // 是否显示历史记录
const searchBox: Ref<HTMLElement | null> = ref(null); // 搜索框DOM引用// 模拟的搜索建议数据
const mockSuggestions: Suggestion[] = ["vue3教程","vue3中文文档","vue3生命周期","vue3 composition api","vue3 vs vue2","vue3项目实战","vue3组件开发","vue3响应式原理","vue3路由配置","vue3状态管理"
];/*** 处理输入事件 - 当用户在搜索框中输入时触发*/
const handleInput = (): void => {// 如果搜索框为空，重置建议列表并显示历史记录if (!query.value) {suggestions
.value = [];showSuggestions
.value = false;showHistory
.value = true;return;}// 模拟API请求setTimeout(() => {// 过滤出包含搜索关键词的建议项（不区分大小写）suggestions
.value = mockSuggestions.filter(item => item
.toLowerCase().includes(query.value.toLowerCase()));// 显示建议列表showSuggestions.value = true;// 隐藏历史记录showHistory.value = false;// 重置激活建议项索引activeSuggestionIndex.value = -1;}, 200); // 200ms延迟模拟网络请求
};/*** 清空输入框内容*/
const clearInput = (): void => {query.value = '';suggestions.value = [];showSuggestions.value = false;showHistory.value = true;
};/*** 执行搜索操作*/
const search = (): void => {// 如果搜索内容为空则返回if (!query.value.trim()) return;// 添加到历史记录（避免重复）if (!searchHistory.value.includes(query.value)) {// 将新搜索词添加到历史记录开头searchHistory.value.unshift(query.value);// 最多保留10条历史记录if (searchHistory.value.length > 10) {searchHistory.value.pop();}// 将历史记录保存到localStoragelocalStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));}// 在实际应用中这里应该执行真正的搜索操作// 这里使用alert模拟搜索结果alert(`搜索: ${query.value}`);// 隐藏建议列表showSuggestions.value = false;
};/*** 选择搜索建议项* @param suggestion - 选择的建议项*/
const selectSuggestion = (suggestion: Suggestion): void => {// 将建议项内容填充到搜索框query.value = suggestion;// 执行搜索search();
};/*** 选择历史记录项* @param item - 选择的历史记录项*/
const selectHistory = (item: string): void => {// 将历史记录内容填充到搜索框query.value = item;// 执行搜索search();
};/*** 清空历史记录*/
const clearHistory = (): void => {// 清空历史记录数组searchHistory.value = [];// 从localStorage中移除历史记录localStorage
.removeItem('searchHistory');
};/*** 键盘向下箭头事件处理* 用于在建议列表中向下导航*/
const onArrowDown = (e: Event): void => {e
.preventDefault(); // 阻止默认行为if (activeSuggestionIndex.value < suggestions.value.length - 1) {activeSuggestionIndex.value++;}
};/*** 键盘向上箭头事件处理* 用于在建议列表中向上导航*/
const onArrowUp = (e: Event): void => {e
.preventDefault(); // 阻止默认行为if (activeSuggestionIndex.value > 0) {activeSuggestionIndex.value--;}
};/*** 键盘回车事件处理* 用于执行搜索或选择当前建议项*/
const onEnter = (): void => {// 如果有激活的建议项，使用该建议项进行搜索if (activeSuggestionIndex.value >= 0 && suggestions.value.length > 0) {query.value = suggestions.value[activeSuggestionIndex.value];}// 执行搜索search();
};/*** 点击外部区域关闭建议列表* @param event - 点击事件对象*/
const handleClickOutside = (event: MouseEvent): void => {// 如果点击发生在搜索框外部，则关闭建议列表if (searchBox.value && !searchBox.value.contains(event.target as Node)) {showSuggestions.value = false;}
};/*** 组件挂载生命周期钩子*/
onMounted((): void => {// 从localStorage加载历史记录const savedHistory: string | null = localStorage.getItem('searchHistory');if (savedHistory) {try {searchHistory.value = JSON.parse(savedHistory) as SearchHistory;} catch (error) {console
.error('Failed to parse search history:', error);// 清空无效历史记录localStorage.removeItem('searchHistory');searchHistory.value = [];}}// 添加全局点击事件监听器document.addEventListener('click', handleClickOutside);
});/*** 组件卸载生命周期钩子*/
onUnmounted((): void => {// 移除全局点击事件监听器document.removeEventListener('click', handleClickOutside);
});
</script>