vue iview 实现搜索 组件

<template>

<div class="citicSearchCon">

<div class="search">

<input ref="input" type="text" placeholder="搜索" @keyup.enter="beginSearch(search_key)" v-model="search_key" @focus="showRecord" @blur="HiddenRecord"/>

<Icon type="ios-search" size="24" class="search_icon" @click="beginSearch(search_key)"/>

<transition name="searchRecord">

<div class="searchRecords-wrap pos-abs font-14" style="color:#333;z-index:20;background-color: #fff;" v-show="isRecord" v-if="searchHistory.length > 0">

<div class="searchRecords-wrap-top">

<div class="fl">

<span class="font-16 font-bold">搜索历史</span>

</div>

<div class="fr">

<!--<i class="icon-searchRecord searchRecords-del-btn" @click="clearHistory"></i>-->

<span class="cursor color-999" @mousedown.self.stop="clearHistory">清空</span>

</div>

</div>

<ul class="searchRecord-list">

<li class="searchRecord-list-item tf-pd10 cursor" :class="{'isHover': item.isOn}" v-for="(item, index) in searchHistory" :key="index" @mouseover="toggleBg(item)" @mouseout="toggleBg(item)" @mousedown.stop="beginSearch(item.name)">

<i class="icon-searchRecord" :class="{'icon-clock-hover': item.isOn, 'icon-clock': !item.isOn}">

</i>

<span>{{item.name}}</span>

<i class="icon-searchRecord icon-del fr" v-show="item.isOn" @mousedown.self.stop="delOneHis(item, index)">

</i>

</li>

</ul>

</div>

</transition>

</div>

</div>

</template>

 

<script>

export default {

name: 'citicSearch',

data() {

return {

search_key: '',

searchHistory: [],

isRecord: false // 搜索历史框显示

}

},

methods: {

// 清空历史记录

clearHistory() {

localStorage.removeItem('citicSearchRecords');

this.search_key = ''

this.searchHistory = []

},

// 删除单条历史记录

delOneHis(item, index) {

this.searchHistory.splice(index, 1)

localStorage.setItem('citicSearchRecords', JSON.stringify(this.searchHistory));

},

// 显示历史搜索

showRecord () {

let tempArr = []

if (localStorage.getItem('citicSearchRecords')) {

tempArr = JSON.parse(localStorage.getItem('citicSearchRecords'));

}

// console.log(tempArr)

if (tempArr.length > 5) {

this.searchHistory = tempArr.slice(tempArr.length - 5, tempArr.length)

} else {

this.searchHistory = tempArr

}

if (this.searchHistory.length > 0) {

this.isRecord = true;

}

// this.searchHistory = JSON.parse(localStorage.getItem('searchRecords'));

},

// hover

toggleBg (item) {

item.isOn = !item.isOn

},

HiddenRecord() {

this.isRecord = false;

},

beginSearch(key) {

this.$refs.input.blur()

this.isRecord = false

if (key.trim() !== '') {

this.search_key = key.trim()

// this.$router.push({name: 'searchstudy', query: {search_key: this.search_key}})

let flag = this.searchHistory.some(item => {

return item.name === key

})

if (!flag) {

this.searchHistory.push({

name: key,

isOn: false

})

}

this.searchHistory.forEach(item => {

item.isOn = false

})

localStorage.setItem('citicSearchRecords', JSON.stringify(this.searchHistory));

setTimeout(() => {

this.$router.push({

name: 'searchResultAll',

query: {search_key: key}

})

}, 500)

}

}

}

}

</script>

 

<style lang="less" scoped>

.searchRecord-enter-active, .searchRecorde-leave-active {

transition: opacity .5s;

}

.searchRecord-enter, .searchRecord-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

/* 搜索历史 */

.searchRecords-wrap {

width: 330px;

border: 1px solid #ddd;

border-radius: 4px;

top: 48px;

border-radius: 10px;

}

.searchRecord-list {

padding: 0 5px;

li {

border-bottom:1px solid #ddd;

&:last-child{

border:none

}

}

}

.icon-searchRecord{

display: inline-block;

background-repeat: no-repeat;

}

.searchRecords-del-btn{

background: url('../assets/img/rubbish.png');

height: 17px;

width: 17px;

}

.icon-clock{

background: url('../assets/img/clock.png');

height: 14px;

width: 14px;

margin-bottom: -2px;

margin-right:4px;

}

.icon-clock-hover{

background: url('../assets/img/clock-sel.png');

height: 14px;

width: 14px;

margin-bottom: -2px;

margin-right:4px;

}

.icon-del{

background: url('../assets/img/del.png');

height: 10px;

width: 10px;

margin-top: 5px

}

.searchRecords-wrap-top{

height: 36px;

padding: 10px 15px;

}

/* 历史列表hover */

.isHover {

background-color: #fafafa;

color: #e1330f;

}

.citicSearchCon{

margin-left:auto;

}

.search{

position: relative;

margin-left: auto;

.search_icon{

position: absolute;

right: 10px;

top: 50%;

transform: translateY(-50%);

}

.search_icon:hover{

cursor: pointer;

color: #e1330f;

}

input{

width: 330px;

height: 36px;

padding: 0 20px;

border: 1px solid #dddddd;

border-radius:18px;

font-size: 14px;

color: #666666;

}

}

</style>