在vue中根据光标的显示与消失实现下拉列表


Posted in Javascript onSeptember 29, 2019

重点知识

mousedown事件:mousedown的执行顺序大于blur事件

HTML代码

<template>
 <div>
  <input ref="search" @focus="showList(true)" v-model="search" @blur="showList(false)"/>
  <ul v-if="state">
   <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(1)">1</li>
   <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(2)">2</li>
   <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(3)">3</li>
   <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(4)">4</li>
  </ul>
 </div>
</template>

通过上面的代码生成了我们的基本下拉列表,接下来是data数据的解析:

data() {
   return {
    search: '',//搜索框值
    state: false,//是否显示下拉列表
    isShowList: false,//判断是点击内容隐藏光标的,还是点击空白隐藏光标的
   }
  },

详细函数解析:

//显示光标和失去光标事件  
   showList(state) {//state用于判断是否是得到光标事件还是失去光标事件
    if (state) {
     this.state = state//显示下拉列表
    } else {
     if(this.isShowList){//this.isShowList用于判断是否是下拉列表里的内容点击的事件
      //把this.isShowList赋值为false让点击空白区能再次触发失去光标事件
      this.isShowList = false
      //让input一直都有光标事件
      this.$refs.search.focus()
     }else {
      this.state = state //隐藏下拉框
     }
    }
   },
   handleSearch(data) {//data搜索的数据
    this.search = data//赋值
    this.isShowList = true//这是区别是否是内容区的点击事件
   }

详细过程

  1. 点击input标签触发showList(true)方法,有它是true直接执行 this.state = state//显示下拉列表
  2. 点击下拉框内容触发handleSearch(data)方法 把 this.isShowList = true 标注这是在下拉框内容的点击事件,将不会隐藏下拉框
  3. 最后通过blur触发showList(false),他将根据this.isShowList判断是否隐藏下拉框,当this.isShowList是true时,执行this.isShowList = false 把this.isShowList回复原样,让点击空白区也能隐藏下拉框,
  4. this.$refs.search.focus()让input再次获得光标事件,这将为点击空白区能触发失去光标事件让下拉框隐藏起来

参考:https://3water.com/article/171151.htm

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

Javascript 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
原生JavaScript实现进度条
Feb 19 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 #Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 #Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 #Javascript
React-redux实现小案例(todolist)的过程
Sep 29 #Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 #Javascript
在Layui中实现开关按钮的效果实例
Sep 29 #Javascript
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
广场舞大赛策划方案
2014/05/31 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
学生会辞职信
2015/03/02 职场文书
2016年端午节寄语
2015/12/04 职场文书
2016年五一促销广告语
2016/01/28 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
SpringBoot集成Redis的思路详解
2021/10/16 Redis