脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuejs 下拉列表

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

 更新时间：2017年05月30日 11:47:53   作者：zhangchao19890805  
这篇文章主要介绍了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，添加了点击事件。

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

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

您可能感兴趣的文章:

相关文章

  • 使用wang-editor上传图片后端接收不到的问题解决

    使用wang-editor上传图片后端接收不到的问题解决

    这篇文章主要介绍了如何解决wang-editor 上传图片后端接收不到的问题，文中通过图文结合给大家讲解的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 在vue中获取wangeditor的html和text的操作

    在vue中获取wangeditor的html和text的操作

    这篇文章主要介绍了在vue中获取wangeditor的html和text的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue electron零基础使用教程

    Vue electron零基础使用教程

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue render深入开发讲解

    Vue render深入开发讲解

    这篇文章主要介绍了Vue render深入开发讲解
    2018-04-04
  • Electron+vite+vuetify项目搭建的流程和方法

    Electron+vite+vuetify项目搭建的流程和方法

    最近想用Electron来进行跨平台的桌面应用开发,同时想用vuetify作为组件,于是想搭建一个这样的开发环境,这里分享下Electron+vite+vuetify项目搭建的流程和方法,感兴趣的朋友一起看看吧
    2024-06-06
  • Vue+Element UI实现下拉菜单的封装

    Vue+Element UI实现下拉菜单的封装

    这篇文章主要为大家详细介绍了Vue+Element UI实现下拉菜单的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    相信现在很多人都是用Vue做过了各种项目,但是项目代码做完和上线并不代表这结束,还有上线以后的优化也是很重要的一点,这篇文章主要给大家介绍了关于Vue项目优化打包的相关资料,需要的朋友可以参考下
    2021-09-09
  • 用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

    这篇文章主要介绍了用vite搭建vue3应用的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue使用keep-alive实现数据缓存不刷新

    vue使用keep-alive实现数据缓存不刷新

    这篇文章主要介绍了vue使用keep-alive实现数据缓存不刷新，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue+Vant实现下拉加载功能

    Vue+Vant实现下拉加载功能

    为了像微信一样方便地加载更多历史消息，这篇文章将为大家介绍我们如何使用vant组件来实现下拉加载功能，感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06

最新评论