文档章节

用Vue.js实现一个简单的搜索框

G
 GreatWall2017
发布于 2017/05/03 14:39
字数 846
阅读 8
收藏 0

在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search

主要用到的知识很简单,简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6,用了webpack打包等等。我资历还浅,先用一个简单的.js的写。

先看效果 
这里写图片描述
这里有两个组件,一个组件是logo部分的,一个是搜索框部分的。

 

html很简单,就是引用两个组件。

<div id="app">
    <logo-picture></logo-picture>
    <search-panel></search-panel>
</div>

 

先来分析,首先一个<img />显示搜索引擎的图片,这里要响应式的,下面选择了不同的搜索引擎图标就要跟着换。所以<img :src="items[now].src" />。后面的倒三角点击时显示下拉列表<span @click="toggleFlag"> </span>。 
然后是下拉框。如果想要有过渡效果,那个就要包裹在<transition-group中,然后遍历li,记住元素要指定唯一的key。 
想要有hover效果的话,用数据驱动的思维,就是比较index 与hoverindex是否相等,如果相等就加class。 

var 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;
        }                     
    }
});

 

input因为要双向绑定,所以要v-model="keyword",还要绑定键盘事件@keyup,如果按enter就搜索,向下向上就选中给定的返回信息列表。 
下面的详情框与<logo-picture>下拉列表差不多。 
搜索的话主要是运用$http.jsonp,还有ES6的语法?回掉好像是Promise的.then()。

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">&times;</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;
        })
    }
})

 

<logo-picture>换了搜索引擎的话,<search-panel>要换成相应的搜索引擎。这里要新建一个空的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 。

 

转载自http://blog.csdn.net/weixin_35987513/article/details/53308953

本文转载自:http://blog.csdn.net/weixin_35987513/article/details/53308953

共有 人打赏支持
G
粉丝 0
博文 25
码字总数 13402
作品 0
深圳
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
05/22
0
0
Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1
05/05
0
0
AgileBPM/bpm-app

AgileBPM 移动端 与pc端无缝协同处理办公任务。 它是一个比较完整的流程审批的移动端项目,如果您是第一次开发基于VUE的App,它是一个很好的基础项目模板。如果您正在开发协同办公类APP,那么...

AgileBPM
07/21
0
0
Vue-role v0.1.0 发布,Vue 可视化权限管理组件

vue-role 项目介绍 Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no V0.1.0功能 1.任何 ctr+...

景颢
09/29
0
0
Vue中你不知道但却很实用的黑科技

本文纯技术干货,首发于 掘金,转载请注明出处和作者。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧...

Aresn
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashTable

Hashtable 是一个散列表,它存储的内容是键值对(key-value)映射 Hashtable 继承于Dictionary,实现了Map、Cloneable、java.io.Serializable接口 Hashtable 的函数都是同步的,这意味着它是线...

职业搬砖20年
13分钟前
1
0
Linux系统状态查看命令1

10月23日任务 10.1 使用w查看系统负载 10.2 vmstat命令 10.3 top命令 10.4 sar命令 10.5 nload命令 查看系统负载 w命令 # 第一行:当前系统时间,系统启动时间,登录的用户,系统负载:1分钟...

robertt15
29分钟前
1
0
缓存那些事

前言 一般而言,现在互联网应用(网站或App)的整体流程,可以概括如图1所示,用户请求从界面(浏览器或App界面)到网络转发、应用服务再到存储(数据库或文件系统),然后返回到界面呈现内容...

Skqing
38分钟前
2
0
nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
44分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
47分钟前
119
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部