64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup>
|
|
import { NInput, NIcon } from "naive-ui";
|
|
import pubsub from "pubsub-js";
|
|
import { useRouter } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import { getHotDetail, searchSuggest } from "@/network/search.js";
|
|
import { ref } from "vue";
|
|
import SvgSearchOutline from "@/assets/svgs/SearchOutline.svg";
|
|
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
|
|
const keywords = ref("");
|
|
const elSearch = ref(null);
|
|
|
|
const search = () => {
|
|
if (keywords.value.length > 0){
|
|
pubsub.publish("zp.toggleSearch");
|
|
// elSearch.value.blur()
|
|
router.push(`/search/1/${keywords.value}`);
|
|
}
|
|
};
|
|
|
|
const handleInput = () => {
|
|
pubsub.publish('zp.showSearch');
|
|
pubsub.publish("zp.searchInput", keywords.value);
|
|
};
|
|
|
|
|
|
const result = ref({});
|
|
</script>
|
|
<template>
|
|
<div id="search">
|
|
<n-input
|
|
ref="elSearch"
|
|
size="small"
|
|
round
|
|
placeholder="请搜索..."
|
|
clearable
|
|
@activate="
|
|
() => {
|
|
pubsub.publish('zp.showSearch');
|
|
}
|
|
"
|
|
v-model:value="keywords"
|
|
@keyup.enter="search"
|
|
@input="handleInput"
|
|
style="width: 190px"
|
|
>
|
|
<template #prefix>
|
|
<n-icon>
|
|
<SvgSearchOutline />
|
|
</n-icon>
|
|
</template>
|
|
</n-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {};
|
|
</script>
|
|
|
|
<style></style>
|