在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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
修改Vue打包后的默认文件名操作
Aug 12 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
JS class语法糖的深入剖析
Jul 07 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
对python自动生成接口测试的示例讲解
2018/11/30 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python如何读写CSV文件
2020/08/13 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
几个常见的软件测试问题
2016/09/07 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
继承公证书格式
2015/01/26 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL