所需插件：
1.vue.js //主要
2.vue-resource.js //扩展vue，jsonp调百度接口
3.bootstrap4.0 //样式
知识点：
1. vue父子组件传参
2.jsonp调百度接口
3.div获得焦点->tabindex="0"
先看图：
1536762467(1).jpg
微信截图_20180912222812.png
废话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于vue模仿百度搜索</title>
<link rel="stylesheet" href="../css/bootstrap4.css">
<style>
#app{
margin: 0 auto;
margin-top: 100px;
width: 400px;
height: 500px;
}
.input-group{
margin-bottom: 3px;
}
.list-group-item{
padding: 3px 20px;
}
img.bg-info{
/* display: block; */
width: 40px;
height: 40px;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="app" class="form">
<!-- 数据传递：父->子 -->
<!-- 搜索组件 -->
<app-search :currword="keyWord" @psend="get"></app-search>
<!-- 搜索提示内容组件 -->
<app-sea-con :currdata="lists" :keyword="keyWord" :tabindex="0"></app-sea-con>
<p v-show="lists.length==0">暂无更多数据...</p>
</div>
</div>
<template id="search">
<div class="input-group">
<div class="input-group-prepend ">
<img class="input-group-text bg-info" src="../assets/logo/qb.png" alt="">
</div>
<input type="text" class="form-control" maxlength="80" placeholder="" v-model="content" @input="send"/>
<div class="input-group-append">
<button class="btn btn-info input-group-btn">搜索</button>
</div>
</div>
</template>
<template id="searchContent">
<div class="list-group" @keydown.up="up" @keydown.down="down" @keydown.enter.prevent="enter" ref="searchcon">
<a :href="url+data" class="list-group-item list-group-item-action" v-for="(data,idx) in currdata" :class="{active:currentid===idx}" @click.prevent="select(idx,$event)" @dblclick="letgo(idx)">
{{data}}
</a>
</div>
</template>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-resource.js"></script>
<script>
//搜索组件
Vue.component('AppSearch',{
template:'#search',
props:['currword'],
data(){
return {
//输入的内容
content:'',
timer:'',
}
},
methods :{
//oninput触发该函数
send(){
let self = this;
clearTimeout(this.timer);
this.timer = setTimeout(function(){
//向父组件传递参数
self.$emit('psend',self.content);
},505);
}
}
});
//搜索提示内容组件
Vue.component('AppSeaCon',{
template:'#searchContent',
//获取父组件传递过来的数据
//currdata：jsonp请求后得到的数据
props:['currdata'],
//currentid :当前列选中的项高亮
//url:跳转的链接
data:function(){
return {
currentid:0,
baseUrl:'https://www.baidu.com/s?wd='
}
},
computed:{
url:{
get(){
return this.baseUrl;
},
set(val){
this.baseUrl = val;
}
}
},
methods:{
//选中那一项
select(id,e){
this.currentid = id;
//去除a的焦点
e.target.blur();
//div获得焦点 注意div是获取不到焦点的 需要夹上tabindex = "0";
this.$refs.searchcon.focus();
},
letgo(id){
location.href = this.baseUrl+this.currdata[id];
},
down(){
this.currentid++;
if(this.currentid>this.currdata.length-1){
this.currentid = 0;
}
},
up(){
this.currentid--;
if(this.currentid<0){
this.currentid = this.currdata.length-1;
}
},
enter(){
location.href = this.baseUrl+this.currdata[this.currentid];
}
}
})
let vm = new Vue({
el:'#app',
data:{
keyWord:'',
lists:[],
now:-1
},
methods:{
get(val){
this.keyWord = val;
let self= this;
//jsonp调用百度查询接口
self.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?",{
// 参数值==关键字
params:{wd:self.keyWord},
jsonp:'cb'
}).then(function(res){
self.lists=res.data.s;
},function(res){
console.log(res);
})
}
}
})
</script>
</body>
</html>
网友评论