62 lines
1.0 KiB
Vue
62 lines
1.0 KiB
Vue
<template>
|
|
<div class="search-suggestion">
|
|
<div
|
|
v-for="(item, index) in suggestions"
|
|
:key="index"
|
|
class="suggestion-item"
|
|
@click="handleSelect(item)"
|
|
>
|
|
<span v-html="item"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SearchSuggestion',
|
|
props: {
|
|
suggestions: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
methods: {
|
|
handleSelect(keyword) {
|
|
const plainKeyword = keyword.replace(/<em>|<\/em>/g, '');
|
|
this.$emit('select', plainKeyword);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.search-suggestion {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
z-index: 100;
|
|
|
|
.suggestion-item {
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
:deep(em) {
|
|
color: #00b42a;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
</style>
|