基于Vue.js实现简单搜索框

<div id="app"> <logo-picture></logo-picture> <search-panel></search-panel></div>//js还要实例#appvar app = new Vue({ el: "#app"})

Vue.component('logo-picture',{ template :' / <div class="main-logo">/ <img :src="items[now].src" @click="toggleFlag"/>/ <span @click="toggleFlag" class="logoList-arrow"> </span>/ <transition-group tag="ul" v-show="flagShow" class="logoList">/  <li v-for="(item,index) in items" :key="index" @click="changeFlag(index)" @mouseover="flagHover(index)" :class="{selectback: index == hoverindex}">/  <img :src="item.src" />/  </li>/ </transition>/ </div>', data: function() { return {  items: [{src:'../src/assets/360_logo.png'},{src:'../src/assets/baidu_logo.png'},{src:'../src/assets/sougou_logo.png'}],  now: 0,  flagShow: false,  hoverindex: -1  } }, methods: { //显示隐藏图片列表 toggleFlag: function() {  this.flagShow = !this.flagShow; }, //改变搜索引擎 changeFlag: function(index) {  this.now = index;  this.flagShow = false;  bus.$emit("change",index); }, //li hover flagHover: function(index) {  this.hoverindex = index; }    }});

Vue.component('search-panel',{ template:'/ <div class="search-input">/ <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>/ <span @click="clearInput()" class="search-reset">×</span>/ <button @click="searchInput()" class="search-btn">搜一下</button>/ <div class="search-select">/  <transition-group tag="ul" mode="out-in">/  <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">/   {{value}}/  </li>/  </transition-group>/ </div>/ </div>', data: function() { return {  search: '',  myData: [],  flag: 0,  now: -1,  logoData: [  {   'name': "360搜索",   searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="  },  {   'name': "百度搜索",   searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="  },  {   'name': "搜狗搜索",   searchSrc: "https://www.sogou.com/web?query="  }  ] } }, methods: { get: function(event) {  if(event.keyCode == 38 || event.keyCode == 40){ //向上向下  return ;  }  this.$http.jsonp('https://sug.so.360.cn/suggest?word=' + this.search + '&encodein=utf-8&encodeout=utf-8').then(function(res) {  this.myData = res.data.s;  }, function() {  }); }, //清除内容 clearInput: function() {  this.search = '';  this.get(); }, //搜索 searchInput: function() {  alert(this.flag)  window.open(this.logoData[this.flag].searchSrc+this.search); }, //搜索的内容 searchThis: function(index) {  this.search = this.myData[index];  this.searchInput(); }, //li hover selectHover: function(index) {  this.search = this.myData[index];  this.now = index; }, //向下 selectDown: function() {  this.now++;  if(this.now == this.myData.length) {  this.now = 0;  }  this.search = this.myData[this.now]; }, //向上 selectUp: function() {  this.now--;  if(this.now == -1) {  this.now = this.myData.length - 1;  }  this.search = this.myData[this.now]; } }, created: function() { //通信 var self = this; bus.$on('change',function(index) {  self.flag = index; }) }})

var bus = new Vue();//logo-picture里触发事件，并传递参数bus.$emit("change",index);//search-panel里监听事件是否发生var self = this;bus.$on('change',function(index) { self.flag = index;})