在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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
vue 实现tab切换保持数据状态
Jul 21 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php生成短网址示例
2014/05/05 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
require.js中的define函数详解
2017/07/10 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
创业资金计划书
2014/02/06 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
倡议书的写法
2014/08/30 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
采购内勤岗位职责
2015/04/13 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
污染环境建议书
2015/09/14 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python