51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<!-- components/SearchInput.vue -->
|
|
<script setup>
|
|
import { CloseCircle } from '@vicons/ionicons5'
|
|
import {
|
|
Camera,
|
|
Search,
|
|
} from 'lucide-vue-next'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'search'])
|
|
|
|
function handleSearch() {
|
|
if (props.modelValue) {
|
|
emit('search', props.modelValue)
|
|
}
|
|
}
|
|
function clearInput() {
|
|
emit('update:modelValue', '')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative flex items-center bg-[#f1f2f7] rounded-md px-2 py-2">
|
|
<input
|
|
type="text"
|
|
:value="modelValue"
|
|
placeholder="搜索模型/图片/创作者寻找灵感"
|
|
class="w-[280px] h-4 bg-[#f1f2f7] rounded-md border-0 outline-none text-gray-800 text-[12px] placeholder:text-gray-400"
|
|
@input="$emit('update:modelValue', $event.target.value)"
|
|
@keyup.enter="handleSearch"
|
|
>
|
|
<div class="flex items-center w-5 mr-2">
|
|
<n-icon v-if="modelValue" size="20" class="cursor-pointer" @click="clearInput">
|
|
<CloseCircle />
|
|
</n-icon>
|
|
</div>
|
|
|
|
<Camera class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" />
|
|
<Search class="h-5 w-5 text-gray-400 mr-3 cursor-pointer" @click="handleSearch" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|