vue搜索页开发实例代码详解（热门搜索，历史搜

首先完成这个伪搜索框

src/components/search/index.vue （通用搜索框组件）

<template> <div> <i></i> <div v-if="fake">{{placeholder}}</div> <input type="text" title="搜索框" :placeholder="placeholder" ref="input" v-model="query" v-if="!fake" > <i v-show="query" @click="reset" ></i> </div> </template> <script> import {debounde} from 'assets/js/util'; export default { name:'Search', props:{//接收的参数 placeholder:{ type:String, default:'请输入搜索内容' }, fake:{ type:Boolean, default:false } }, data(){ return{ query:'', } }, watch:{ query:debounde(function(){ this.$emit('query',this.query); }) }, methods:{ focus(){ this.$refs.input && this.$refs.input.focus(); }, clear(){ this.query=''; }, reset(){//重置 this.clear(); this.focus(); } } } </script> <style lang="scss" scoped> $search-box-height: 30px; $icon-color: #ccc; $icon-font-size-sm: 18px; .mine-search-box-wrapper { display: flex; align-items: center; width: 85%; height: $search-box-height; padding: 0 7px; background-color: #fff; border-radius: $search-box-height / 2; margin-left:15px; } .iconfont { color: $icon-color; font-size: $icon-font-size-sm; font-weight: bold; } .mine-search-box { flex: 1; background: none; border: none; margin: 0 6px; color: #666; line-height: 1.5; } </style>

src/assets/js/util.js  节流函数（防止请求数据时频率过快消耗性能）

//函数节流 export const debounde=(func,delay=200)=>{ let timer=null; return function(...args){ timer && clearTimeout(timer); timer=setTimeout(()=>{ func.apply(this,args); },delay); } }

在分类页的头部组件中引入搜索框组件

src/pages/category/header.vue

<template> <div> <i></i> <div> <search placeholder="开学季有礼，好货五折起" @query='getQuery' fake @click.native="goToSearch" /> </div> <i></i> </div> </template> <script> import Search from 'components/search'; export default { name:'CategoryHeader', components:{ Search }, methods:{ getQuery(query){ console.log(query); }, goToSearch(){ this.$router.push('/search'); } } } </script> <style lang="scss" scoped> .header{ background-color:rgba(222, 24, 27, 0.9); transition:background-color 0.5s; display: flex; justify-content: space-between; align-items: center; padding:5px 20px; .iconfont{ font-size:24px; color:#fff; } .header-center{ flex:1; } } </style>

点击搜索框之后会跳转到真正的搜索页

热门搜索组件

src/pages/search/hot.vue

<template> <div> <h4>热门搜索</h4> <div v-if="!hots.length"> <me-loading/> </div> <ul v-else> <li v-for="(item,index) in hots" :key="index" @click="$_selectItem(item.hotWord)"> {{item.hotWord}} </li> </ul> </div> </template> <script> import Search from 'components/search'; import MeLoading from 'components/loading'; import {getHot} from 'api/search'; import {searchMixin} from 'api/mixins'; export default { name:'SearchHot', components:{ MeLoading }, data(){ return{ hots:[] } }, mixins:[searchMixin], created(){ this.getHot().then(()=>{ this.$emit('loaded'); }) }, methods:{ getHot(){ return getHot().then(data=>{ return new Promise(resolve=>{ if(data){ this.hots=data; resolve(); } }) }) } } } </script> <style lang="scss" scoped> $border-color: #e5e5e5; $font-size-base: 12px; $font-size-l: $font-size-base + 2; .hot { padding-left: 10px; background-color: #fff; border-bottom: 1px solid $border-color; margin-bottom: 10px; &-title { height: 34px; line-height: 34px; font-size: $font-size-l; font-weight: bold; } &-list { display: flex; flex-wrap: wrap; } &-item { padding: 8px; background-color: #f0f2f5; border-radius: 4px; margin: 0 10px 10px 0; color: #686868; } } .loading-container { padding: 10px 0; } </style>

axios获取热门搜索数据

src/api/search.js

import axios from 'axios'; //获取热门搜索数据 ajax export const getHot=()=>{ return axios.get('http://www.imooc.com/api/search/hot').then(res=>{ res=res.data.hotKeyWord; if(res && res.owner){ return res.owner; } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); }); }

点击搜索的关键词，跳转到淘宝搜索程序

src/api/mixins.js