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


Posted in Javascript onMarch 26, 2020

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

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

先看效果

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

这里有两个组件,一个组件是logo部分的,一个是搜索框部分的。

html

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

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

//js还要实例#app
var app = new Vue({
 el: "#app"
})

logo

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

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">×</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.

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
tsconfig.json配置详解
May 17 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
利用vue-router实现二级菜单内容转换
Nov 30 #Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
You might like
php MessagePack介绍
2013/10/06 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python装饰器初探(推荐)
2016/07/21 Python
python的exec、eval使用分析
2017/12/11 Python
python多线程同步之文件读写控制
2021/02/25 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
无私奉献演讲稿
2014/09/04 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
教学督导岗位职责
2015/04/10 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python