vuejs实现搜索框的方法:1、创建logo和搜索框部分的组件;2、新建一个空的Vue对象;3、使用“bus.$emit("change",index);”触发事件并传递参数即可。
本文操作环境:Windows7系统、vue2.9.6版,DELL G3电脑。
vuejs怎么实现搜索框?
基于Vue.js实现简单搜索框
在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search
主要用到的知识很简单,简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6,用了webpack打包等等。我资历还浅,先用一个简单的.js的写。
先看效果
这里有两个组件,一个组件是logo部分的,一个是搜索框部分的。
html
html很简单,就是引用两个组件。
<p id="app"> <logo-picture></logo-picture> <search-panel></search-panel> </p> //js还要实例#app var app = new Vue({ el: "#app" })
logo
先来分析,首先一个6ed09268cbdd0015bce8dcbbdfa9bfe4显示搜索引擎的图片,这里要响应式的,下面选择了不同的搜索引擎图标就要跟着换。所以ce79b531bd3d51fe52b9ea309b181595。后面的倒三角点击时显示下拉列表ff7b32596bbe913deeb2bf646eace494 54bdf357c58b8a65c66d7c19c8e4d114。
然后是下拉框。如果想要有过渡效果,那个就要包裹在7888b31a813930636e9b69fdbcec6704下拉列表差不多。
搜索的话主要是运用$http.jsonp,还有ES6的语法?回掉好像是Promise的.then()。
Vue.component('search-panel',{ template:'\ <p 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>\ <p 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>\ </p>\ </p>', 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; }) } })
两个兄弟组件通信的问题
fd098b03a0046905b4f34a14f2cba3c4换了搜索引擎的话,04a43090e6cbf1462a77fdb864c1f813要换成相应的搜索引擎。这里要新建一个空的Vue对象做中间,因为两个组件不是父子关系。
var bus = new Vue(); //logo-picture里触发事件,并传递参数 bus.$emit("change",index); //search-panel里监听事件是否发生 var self = this; bus.$on('change',function(index) { self.flag = index; })
这里要注意this问题,$on里this指向bus,所以要保存this才能引用search-panel.
推荐学习:《vue教程》
以上是vuejs怎么实现搜索框的详细内容。更多信息请关注PHP中文网其他相关文章!