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

2019-11-19 15:35:19

字体：大中小

来源：转载

供稿：网友

使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Vue模拟百度搜索</title> <style type="text/css"> 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; } .baidu input{  height: 30px;  cursor: pointer;  color: #fff;  letter-spacing: 1px;  background: #3385ff;  border: 1px solid #2d78f4; } ul{  padding: 0;  margin-top: 6px; } li{  list-style: none;  margin: 4px; } li:hover{  background: #ccc; } .bgcolor {  background: #ccc; } </style> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script> <script type="text/javascript"> window.onload = function() {  new Vue({   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;     }    }   }  }); } </script></head> <body> <div id="box"> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129">  <div>   <div>    <input      type="text"      class="input"      placeholder="请输入搜索内容 "      v-model='inputText'      @keyup='show($event)'      @keydown.down='down()'      @keydown.up.prevent='up()'    >    <span class="baidu" @click="goto()">     <input type="submit" value="百度一下" >    </span>   </div>      <ul>    <li v-for="(item, index) in result" :class='{bgcolor: index==nowIndex}' @click="gotoItem(item)">     {{item}}    </li>   </ul>  </div> </div></body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery EasyUI结合zTree树形结构制作web页面

下一篇：JavaScript闭包的简单应用