html5取消下拉菜单,Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)...
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 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,添加了点击事件。
export default {
methods:{
clickRoot(event){
this.$store.dispatch("clickRootNumAction", 1);
}
}
}
以上所述是小编给大家介绍的Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
html5取消下拉菜单,Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)...相关推荐
- html JS实现下拉菜单,vue.js怎么实现下拉框
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...
- html5地区下拉菜单,JS特效:地区下拉菜单
可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏.代码如下大家试试. HTML 西安市 铜川市 宝鸡市 未央区 莲湖区 新城区 碑林区 雁 ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
- 10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- html5三级下拉菜单,Bootstrap多级下拉菜单插件
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件. 原生的bootstrap下拉菜单只有一层,通过boot ...
- 简单的html5级联下拉菜单,什么是html5纯CSS的三级联动级联菜单
给你一个JQ的三级联动:<!doctype html><html><head><title></title><meta charset ...
- HTML5 CSS3 下拉菜单效果
A Flash Blue Menu 在线演示 源码下载 Fancy Rolling Navigatio 在线演示 源码下载 Sweet tabbed navigation using ...
- 仿百度的下拉菜单原生js
废话不多说直接上demo 登录 微博登录 百度登录 网易登录 设置 微博登录 百度登录 网易登录 学术 微博登录 百度登录 网易登录 js如下:注释的是最不用动脑子的想法:没有注释就涉及到闭包的问题, ...
- html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...
最新文章
- 机器视觉与机器学习牛人博客
- 为什么掌握 Linux 对程序员这么重要
- 深入浅出 JQuery (一) 浅析JQuery
- @RequestParam和@RequestBody
- Spring 教程03
- sql 中on和where的区别
- c语言程序女设计教学效果分析,C语言程序设计的教学论文
- Java 并发之线程池学习
- 如何解决wampmysqld服务无法启动,错误id=1067
- shop--8.商品类别--批量操作--添加(前端)
- 拓端tecdat|R语言:状态空间模型和卡尔曼滤波预测酒精死亡人数时间序列
- linux 默认ping的端口,linux的ping命令端口号
- c语言mud游戏制作,MUD游戏制作工具下载
- 艺歌点歌系统服务器连接不了,艺歌手机点歌系统歌曲是什么格式
- Trove系列(七)——Trove的Mysql的复制功能介绍
- STM32——三原色
- 论坛IP签名档PHP源码,简单几步,教你制作自己的显IP签名档
- 华为手机鸿蒙系统手机_华为鸿蒙系统迎巨大利好,世界首富正式认错,放弃第三大手机系统...
- 计算机发展史的pdf文档,计算机的发展历程.pdf
- Java中线程超详细版本
热门文章
- ScrumMaster的教练职责
- Comarin香豆素标记金纳米团簇|Ce6二氢卟吩标记金纳米团簇|红色荧光的水溶性金纳米团簇(T-Au NCs)
- 模拟简单计算器编程c语言,模拟计算器程序
- 1-3魔方阵 -Java
- C语言中switch的用法
- 【蚁群系统】解决TSP旅行商问题(matlab实现)
- 管理运筹学软件计算机解咋看,管理运筹学 第3章 线性规划问题的计算机求解.ppt...
- 计算机应用计算题(88)10,2018一级结构工程师《计算机应用基础》题库及答案(十)...
- Flowable入门系列文章42 - 用户任务
- 新产品开发之C流程 (C-flow)