在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 相关文章推荐
jquery 实现返回顶部功能
Nov 17 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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对字符串的递增运算分析
2010/08/08 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
js常用函数 不错
2006/09/08 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python实现简单http服务器
2018/04/12 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
浅析python的优势和不足之处
2018/11/20 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
特教教师先进事迹
2014/05/21 职场文书
应届大专生求职信
2014/06/26 职场文书
医德医风自我评价
2014/09/19 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
小学感恩主题班会
2015/08/12 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL