searchHistory.vue 1.01 KB
<template>
	<div class="search-history-com" v-if="searchHistoryArr.length">
		<div class="title">历史搜索</div>
		<div class="box">
			<div class="list-box">
				<div class="item" v-for="(item, index) in searchHistoryArr" :key="index" @click="jump(item)">
					<div class="text">{{item}}</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="buttons-box">
				<div class="btn btn-primary" @click="clear">清除搜索历史</div>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        data: function () {
            return {

            }
        },
		props: ["searchHistoryArr"],
		methods: {

			/**
			 * 点击跳转
			 * @param {object} item [数据对象]
			 */
			jump(item) {
				this.$emit("jump", item);
			},

			/**
			 * 清除搜索历史
			 */
			 clear(item) {
				this.$emit("clear");
			}
		}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
    @import './searchHistory';
</style>