feat(搜索): 为搜索输入框添加清除按钮功能

在AppHeader和UpdateCenterToolbar组件中为搜索输入框添加清除按钮
点击按钮可清空搜索内容并触发相应事件
This commit is contained in:
xiyidaiwa
2026-04-14 14:07:23 +08:00
parent f044c6c3df
commit c9c84e518b
2 changed files with 33 additions and 1 deletions
+19
View File
@@ -22,7 +22,17 @@
placeholder="搜索应用名 / 包名 / 标签,按回车键搜索"
@keydown.enter="handleSearch"
@focus="handleSearchFocus"
@input="handleInput"
/>
<button
v-if="localSearchQuery"
type="button"
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors"
@click="clearSearch"
title="清除搜索"
>
<i class="fas fa-times-circle"></i>
</button>
</div>
<button
type="button"
@@ -78,6 +88,15 @@ const handleSearchFocus = () => {
emit("search-focus");
};
const handleInput = () => {
emit("update-search", localSearchQuery.value);
};
const clearSearch = () => {
localSearchQuery.value = "";
emit("update-search", "");
};
watch(
() => props.searchQuery,
(newVal) => {