88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<!-- components/SearchInput.vue -->
|
|
<script setup>
|
|
import { CloseCircle } from "@vicons/ionicons5";
|
|
import { Camera, Search } from "lucide-vue-next";
|
|
import { computed } from 'vue';
|
|
import { useRoute } from "vue-router";
|
|
const modalStore = useModalStore();
|
|
|
|
const route = useRoute();
|
|
// const currentPath = route.path;
|
|
const searchType = ref({
|
|
"/picture-square": "image",
|
|
"/work-square": "workFlow",
|
|
});
|
|
// const props = defineProps({
|
|
// modelValue: {
|
|
// type: String,
|
|
// default: "",
|
|
// },
|
|
// });
|
|
// const emit = defineEmits(["update:modelValue", "initSearch"]);
|
|
const keyword = ref("");
|
|
if (modalStore.searchQuery) {
|
|
keyword.value = modalStore.searchQuery;
|
|
}
|
|
function handleSearch() {
|
|
if (keyword.value) {
|
|
modalStore.updateSearchQuery(keyword.value);
|
|
if (route.path !== "/search") {
|
|
const baseUrl = window.location.origin;
|
|
const type = searchType.value[route.path]
|
|
debugger
|
|
window.open(
|
|
`${baseUrl}/search?keyword=${keyword.value}&type=${type}`,
|
|
"_blank",
|
|
"noopener,noreferrer"
|
|
);
|
|
// router.push({
|
|
// path: `/search`,
|
|
// query: {
|
|
// keyword: props.modelValue,
|
|
// type:searchType[currentPath]
|
|
// },
|
|
// });
|
|
} else {
|
|
// modalStore.updateSearchQuery(keyword.value);
|
|
// this.$store.dispatch('updateSearchQuery', props.modelValue)
|
|
}
|
|
}
|
|
}
|
|
function clearInput() {
|
|
keyword.value = ''
|
|
modalStore.searchQuery = ''
|
|
// modalStore.updateSearchQuery('')
|
|
// emit("update:modelValue", "");
|
|
}
|
|
|
|
const searchQuery = computed(() => modalStore.searchQuery);
|
|
watch(searchQuery, (newValue) => {
|
|
keyword.value = newValue
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- // @input="$emit('update:modelValue', $event.target.value)" -->
|
|
<!-- :value="modalStore.searchQuery" -->
|
|
|
|
<div class="relative flex items-center bg-[#f1f2f7] rounded-md px-2 py-2">
|
|
<input
|
|
type="text"
|
|
v-model="keyword"
|
|
placeholder="搜索模型/图片/创作者寻找灵感"
|
|
class="w-[280px] h-4 bg-[#f1f2f7] rounded-md border-0 outline-none text-gray-800 text-[12px] placeholder:text-gray-400"
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
<div class="flex items-center w-5 mr-2">
|
|
<n-icon v-if="keyword" size="20" color="#ccc" 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>
|