66 lines
2.0 KiB
Svelte
66 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import SearchIcon from "src/components/icon/SearchIcon.svelte";
|
|
import CloseIcon from "src/components/icon/CloseIcon.svelte";
|
|
|
|
let inputValue = ""; // 使用一个变量来绑定 input 的值
|
|
export let close = () => {
|
|
};
|
|
|
|
export function changeFocusState(target: boolean) {
|
|
if (!inputElement) return;
|
|
if (target) {
|
|
inputElement.focus();
|
|
} else {
|
|
inputElement.blur();
|
|
}
|
|
}
|
|
|
|
function search(query: string) {
|
|
window.location.href = `/song/${query}/info`;
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
const value = inputValue.trim();
|
|
if (!value) return;
|
|
search(value);
|
|
}
|
|
}
|
|
|
|
let inputElement: HTMLInputElement;
|
|
</script>
|
|
|
|
<style>
|
|
[type="search"]::-webkit-search-cancel-button,
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
</style>
|
|
|
|
<div class="absolute md:relative left-0 h-full mr-0 inline-flex items-center w-full px-4 md:px-0
|
|
md:w-full xl:max-w-[50rem] md:mx-4">
|
|
<div class="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high dark:bg-zinc-800/70
|
|
backdrop-blur-lg flex justify-between md:px-5">
|
|
<button class="w-6" on:click={() => search(inputValue)}>
|
|
<SearchIcon className="h-full inline-flex items-center text-[1.5rem]
|
|
text-on-surface-variant dark:text-dark-on-surface-variant"/>
|
|
</button>
|
|
<input
|
|
bind:this={inputElement}
|
|
bind:value={inputValue}
|
|
type="search"
|
|
placeholder="搜索"
|
|
autocomplete="off"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
|
|
on:keydown={handleKeydown}
|
|
/>
|
|
<button class={"w-6 duration-100 " + (inputValue ? "md:opacity-100" : "md:opacity-0") } on:click={() => {inputValue = ""; close();}}>
|
|
<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem]
|
|
text-on-surface-variant dark:text-dark-on-surface-variant"/>
|
|
</button>
|
|
</div>
|
|
</div> |