联系我们 - 广告服务
您的当前位置:官网首页 > 资讯 > 热评 >

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

来源: 编辑: 时间:2019-08-27
导读: 在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 html 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题......

在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 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;
vue.use;
vue.use;
const router = new vuerouter
})

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

 template 
 div @click="clickroot" 
 router-view /router-view 
 /div 
 /template 
 script 
 export default {
 methods:{
 clickroot{
 this.$store.dispatch;
 /script 
责任编辑:

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:iOS常见的几个修饰词深入讲解
下一篇:没有了

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © 2018 凯发vip凯发vip-凯发vip网址-凯发官网 All Rights Reserved Power by DedeCms
本站所有资讯来源于网络 如有侵权请联系QQ:9490489
Top