Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)


Posted in Javascript onMay 30, 2017

在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表?

解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表。

如果是纯 JS 代码,有人可能会使用 document.onclick 来添加根节点事件。不过,我现在使用 Vue.js,会选择使用 Vue.js 的方式处理这个问题。

Vue.js 使用组件化的方式组织代码,会有一个根组件,可以在这个根组件上加上 @click 事件,来响应区域外的点击事件。在一个完整的应用中,可能有多种场景需要这种区域外点击关闭的功能。除了最普通的表单里的下拉列表外,还可能是网站右上角的消息提示框,或者菜单。比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去。

那么如何让各个子组件响应根组件上的点击事件呢?可以使用Vuex来做到这一点。在这里 Vuex 起到了组件之间互相传递信息的作用。

读者可以在这个网址下载我编写的 Demo 项目:

推荐读者使用 yarn install 安装所需的依赖。

下面说一下关键代码:

程序入口 main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
import VueSuperagent from 'vue-superagent'
import Vuex from 'vuex'
import 'babel-polyfill';
import store from './vuex/store';
Vue.use(VueRouter);
Vue.use(VueSuperagent);
Vue.use(Vuex);
const router = new VueRouter({
 mode: 'history',
 routes
})
new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

根节点 App.vue,添加了点击事件。

<template>
 <div @click="clickRoot">
  <router-view></router-view>
 </div>
</template>
<script>
  export default {
    methods:{
      clickRoot(event){
        this.$store.dispatch("clickRootNumAction", 1);
      }
    }
  }
</script>

以上所述是小编给大家介绍的Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
jQuery异步提交表单实例
May 30 #jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 #Javascript
Angularjs中使用轮播图指令swiper
May 30 #Javascript
AngularJS路由Ui-router模块用法示例
May 29 #Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 #Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 #Javascript
You might like
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php compact 通过变量创建数组
2016/11/15 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jQuery技巧总结
2011/01/01 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
js实现左右轮播图
2020/01/09 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
理解Python中的类与实例
2015/04/27 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python set常用操作函数集锦
2017/11/15 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
高三英语教学计划
2015/01/23 职场文书
村官个人总结范文
2015/03/03 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2016国庆促销广告语
2016/01/28 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python