You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
3.0 KiB
80 lines
3.0 KiB
<template>
|
|
<div :class="[prefixCls, `${prefixCls}--host`]">
|
|
<img src="@/assets/images/homeBanner.png" alt="" />
|
|
<div class="search-bar">
|
|
<el-icon :size="27" >
|
|
<svg width="27px" height="27px" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>放大镜</title>
|
|
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="首页" transform="translate(-416.000000, -351.000000)" fill="#000000" fill-rule="nonzero">
|
|
<g id="放大镜" transform="translate(416.000000, 351.000000)">
|
|
<path d="M25.853125,24.25 L20.128125,18.525 C21.73125,16.56875 22.69375,14.071875 22.69375,11.35 C22.69375,5.096875 17.60625,0.00625 11.35,0.00625 C5.096875,0.00625 0.00625,5.09375 0.00625,11.35 C0.00625,17.60625 5.09375,22.69375 11.35,22.69375 C14.06875,22.69375 16.56875,21.73125 18.525,20.128125 L24.25,25.853125 C24.471875,26.075 24.7625,26.184375 25.053125,26.184375 C25.34375,26.184375 25.634375,26.075 25.85625,25.853125 C26.296875,25.409375 26.296875,24.690625 25.853125,24.25 L25.853125,24.25 Z M2.275,11.35 C2.275,6.346875 6.346875,2.275 11.35,2.275 C16.353125,2.275 20.425,6.346875 20.425,11.35 C20.425,16.353125 16.353125,20.425 11.35,20.425 C6.346875,20.425 2.275,16.353125 2.275,11.35 Z" id="形状"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</el-icon>
|
|
<input
|
|
ref="inputData"
|
|
placeholder="按照关键词搜索"
|
|
:value="searchVal"
|
|
@input="onInput"
|
|
@keydown.enter="handleSearch"
|
|
class="mai-input"
|
|
type="text"
|
|
/>
|
|
<button class="mai-btn" @click="handleGoSearch" type="button">搜索</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
const emits = defineEmits(['search'])
|
|
const store = useAppStore()
|
|
const inputData = ref()
|
|
const searchVal = ref('');
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { prefixCls } = useDesign('banner');
|
|
function onInput(ev: { target: { value: string; }; }) {
|
|
searchVal.value = ev.target.value;
|
|
}
|
|
function handleSearch() {
|
|
emits('search', searchVal.value);
|
|
handleGoSearch()
|
|
}
|
|
function handleGoSearch() {
|
|
store.setSearchVal(searchVal.value)
|
|
// if (route.path.includes('/search')) {
|
|
// onInput({target: {value: searchVal.value}})
|
|
// }else {
|
|
if (searchVal.value) {
|
|
if (route.path.includes('/search')) {
|
|
router.replace({
|
|
path: route.path,
|
|
query:{
|
|
keywords: searchVal.value
|
|
}
|
|
})
|
|
}else {
|
|
router.push({
|
|
path: '/search' + route.path,
|
|
query:{
|
|
keywords: searchVal.value
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
// }
|
|
|
|
}
|
|
watchEffect(()=>{
|
|
if (route.path.includes('/search')) {
|
|
searchVal.value = route.query.keywords as string;
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import 'banner';
|
|
</style>
|