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 相关文章推荐
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
vue router 配置路由的方法
Jul 26 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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实现导出excel数据的类库用法示例
2016/10/15 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
教你安装python Django(图文)
2013/11/04 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python读取csv文件实例解析
2019/12/30 Python
python序列类型种类详解
2020/02/26 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Python实现简单的2048小游戏
2021/03/01 Python
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
区域总监的岗位职责
2013/11/21 职场文书
报社实习生自荐信
2014/01/24 职场文书
财经学院自荐信范文
2014/02/02 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
迎新年主持词
2015/07/06 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL