基于Vue.js 2.0实现百度搜索框效果

2023-09-25 10:56:06 303

Vue模拟百度搜索 body,html{ padding:0; margin:0; } #box{ margin-top:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .input{ width:500px; height:30px; text-indent:4px; } .baiduinput{ height:30px; cursor:pointer; color:#fff; letter-spacing:1px; background:#3385ff; border:1pxsolid#2d78f4; } ul{ padding:0; margin-top:6px; } li{ list-style:none; margin:4px; } li:hover{ background:#ccc; } .bgcolor{ background:#ccc; } window.onload=function(){ newVue({ el:'#box', data:{ inputText:'', text:'', nowIndex:-1, result:[] }, methods:{ show(ev){ if(ev.keyCode==38||ev.keyCode==40){ if(this.nowIndex<-1){ return; } if(this.nowIndex!=this.result.length&&this.nowIndex!=-1){ this.inputText=this.result[this.nowIndex]; } return; } if(ev.keyCode==13){ window.open('https://www.baidu.com/s?wd='+this.inputText,'_blank'); this.inputText=''; } this.text=this.inputText; this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ params:{ wd:this.inputText }, jsonp:'cb' }).then(res=>{ this.result=res.data.s; }) }, goto(){ window.open('https://www.baidu.com/s?wd='+this.inputText,'_blank'); this.inputText=''; }, gotoItem(item){ window.open('https://www.baidu.com/s?wd='+item,'_blank'); this.inputText=''; }, down(){ this.nowIndex++; if(this.nowIndex==this.result.length){ this.nowIndex=-1; this.inputText=this.text; } }, up(){ this.nowIndex--; if(this.nowIndex<-1){ this.nowIndex=-1; return; } if(this.nowIndex==-1){ this.nowIndex=this.result.length; this.inputText=this.text; } } } }); }

基于Vue.js 2.0实现百度搜索框效果

热门推荐

随机推荐