vuejs如何实现搜索框
小编给大家分享一下vuejs如何实现搜索框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司服务项目包括沿滩网站建设、沿滩网站制作、沿滩网页制作以及沿滩网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,沿滩网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到沿滩省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
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很简单,就是引用两个组件。
//js还要实例#app var app = new Vue({ el: "#app" })
logo
先来分析,首先一个显示搜索引擎的图片,这里要响应式的,下面选择了不同的搜索引擎图标就要跟着换。所以。后面的倒三角点击时显示下拉列表 。
然后是下拉框。如果想要有过渡效果,那个就要包裹在
Vue.component('logo-picture',{ template :' \\ \ \
', 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; } } });\ \ \ \ \
下拉框
input因为要双向绑定,所以要v-model="keyword",还要绑定键盘事件@keyup,如果按enter就搜索,向下向上就选中给定的返回信息列表。
下面的详情框与
搜索的话主要是运用$http.jsonp,还有ES6的语法?回掉好像是Promise的.then()。
Vue.component('search-panel',{ template:'\\ \ ×\ \
\
\ ', 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; }) } })\ \\ {{value}}\ \
两个兄弟组件通信的问题
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.
以上是“vuejs如何实现搜索框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享题目:vuejs如何实现搜索框
网页网址:http://myzitong.com/article/gsdcoe.html