- ?? 注重版權(quán)，轉(zhuǎn)載請注明原作者和原文鏈接
- ?? 作者：全棧小袁
- ?? 原創(chuàng)個(gè)人開源博客項(xiàng)目(目前V3.0版本)：https://github.com/yuanprogrammer/xiaoyuanboke
- ?? 開源項(xiàng)目覺得還行的話點(diǎn)點(diǎn)star，有什么需要完善或者點(diǎn)子歡迎提issue
小袁有話說
也是好久沒有發(fā)文章了，之前忙著秋招校招春招，入職后一邊忙著工作一邊忙著畢業(yè)設(shè)計(jì)，所以CSDN活躍的比較少了
這次呢，打算整理自己今年所學(xué)到的以及自己的一些demo，然后一篇一篇發(fā)出來和大家分享
今天要分享的是一個(gè)Vue的搜索框組件，近期又做了一個(gè)新的開源項(xiàng)目（后續(xù)會發(fā)布），熱門搜索框組件是項(xiàng)目的其中一個(gè)小組件，分享給大家，先展示下最終的效果圖
搜索框說明
本次實(shí)現(xiàn)的這個(gè)搜索框，是結(jié)合了element ui的兩個(gè)組件
Input 輸入框-
Popover 彈出框這個(gè)是重點(diǎn)，自定義搜索彈框
該組件單獨(dú)分離封裝，直接引入組件就能使用，不需要適配當(dāng)前頁面
因?yàn)橐彩乔岸说囊恍┍容^簡單的操作，代碼也沒什么好教程說明的，直接貼上完整的代碼吧。
唯一要說明的地方應(yīng)該是searchRequest 方法，用于搜索跳轉(zhuǎn)，video/search 路徑換成自己項(xiàng)目的搜索結(jié)果也就可以了，我這里的歷史搜索以及熱門搜索都是寫死的，你們可以自己換成自己項(xiàng)目的API接口請求
完整代碼
創(chuàng)建 SearchInput.vue 文件
<template>
<div class="search-item">
<el-popover
placement="bottom"
width="475"
ref="popover"
trigger="focus"
:visible-arrow="false"
style="padding-top: 0"
v-model="visible">
<div class="search-content">
<div class="search-his" v-show="historySearch.length > 0">
<div>
<span class="title">搜索歷史</span>
<span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
</div>
<el-tag
v-for="tag in historySearch"
:key="tag.name"
size="small"
closable
style="margin-right: 10px; margin-top: 10px; cursor: pointer"
@click="handleSearch(tag.name)"
:type="tag.type">
{{tag.name}}
</el-tag>
</div>
<div :class="'search-hot ' + (historySearch.length > 0 ? 'mt' : '') ">
<span class="title">熱門搜索</span>
<ul class="hot-list">
<li v-for="(item, index) in items" :key="index" class="hot-item">
<span v-if="index < 3" class="top">
<i class="iconvs vs-hot"></i>
</span>
<span v-else>
{{ index + 1 }}
</span>
<span @click="handleSearch(item)">{{ item }}</span>
</li>
</ul>
</div>
</div>
</el-popover>
<el-input
size="medium"
:placeholder="tipsWord"
style="width: 500px"
clearable
v-popover:popover
@keyup.enter.native="searchRequest"
v-model="search">
<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchRequest"></i>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
isMouseOver: false,
search: '',
tipsWord: '',
historySearch: [
{ name: '標(biāo)簽一66666', type: 'info' },
{ name: '標(biāo)簽二無敵無敵', type: 'info' },
{ name: '標(biāo)簽三66', type: 'info' },
{ name: '標(biāo)簽四1', type: 'info' },
{ name: '標(biāo)簽四2', type: 'info' },
{ name: '標(biāo)簽四3', type: 'info' },
{ name: '標(biāo)簽四4', type: 'info' },
{ name: '標(biāo)簽五', type: 'danger' }
],
items: [
'重生之我是都市霸主',
'熱搜',
'熱搜重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主',
'熱搜',
'熱搜',
'熱搜',
'熱搜',
'熱搜',
'熱搜',
'熱搜'
]
}
},
methods: {
handleSearch(word) {
this.search = word
this.searchRequest()
},
clearHistory() {
this.historySearch = []
},
searchRequest() {
const params = {
word: this.search || this.tipsWord
}
const queryString = new URLSearchParams(params).toString();
const url = `${window.location.origin}/video/search?${queryString}`;
window.open(url, '_blank');
}
},
mounted() {
this.tipsWord = this.items[0]
}
};
</script>
<style scoped>
.search-item ::v-deep .el-input .el-input__inner {
border-radius: 8px !important;
}
.search-content span.title {
display: inline-block;
font-size: 15px;
font-weight: bold;
}
.search-content .search-his span.clear {
float: right;
cursor: pointer;
}
.search-content .search-his span.clear:hover {
color: #00aeec;
}
.search-content .mt {
margin-top: 10px;
}
.search-content .search-hot {
width: 100%;
}
.search-content .search-hot ul.hot-list {
width: 100%;
display: flex;
padding: 0;
flex-wrap: wrap;
margin-top: 5px;
list-style: none;
}
.search-content .search-hot ul.hot-list li.hot-item {
width: 50%;
height: 30px;
font-size: 15px;
display: flex;
cursor: pointer;
align-items: center;
}
.search-content .search-hot ul.hot-list li.hot-item span:first-child {
width: 10%;
color: #999999;
text-align: center;
display: inline-block;
}
.search-content .search-hot ul.hot-list li.hot-item span:last-child {
margin-left: 5px;
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-content .search-hot ul.hot-list li.hot-item span.top {
color: #EA322BFF;
}
.search-content .search-hot ul.hot-list li.hot-item:hover {
background-color: #f2f2f2;
}
</style>
使用
使用也很簡單，直接在需要的地方引入該組件就好
最后，如果有什么不懂的地方，可以評論區(qū)留言，或者加主頁的QQ群，群主就是我文章來源：http://www.zghlxwxcb.cn/news/detail-592240.html
感謝各位的支持??和關(guān)注??文章來源地址http://www.zghlxwxcb.cn/news/detail-592240.html
到了這里，關(guān)于Vue搜索組件，顯示熱門、近期搜索（結(jié)合element ui）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
