微客导航 » 文章资讯 » Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

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

2024-02-21 19:04:03 153

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

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

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

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

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

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

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

下面说一下关键代码：

程序入口main.js：

importVuefrom'vue'
importAppfrom'./App.vue'
importVueRouterfrom'vue-router'
importroutesfrom'./router'
importVueSuperagentfrom'vue-superagent'
importVuexfrom'vuex'
import'babel-polyfill';
importstorefrom'./vuex/store';
Vue.use(VueRouter);
Vue.use(VueSuperagent);
Vue.use(Vuex);
constrouter=newVueRouter({
mode:'history',
routes
})
newVue({
el:'#app',
router,
store,
render:h=>h(App)
})

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐