Vue3類似百度風格搜索框組件

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>