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实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

# vuejs # 下拉列表 # jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】 # 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式 # Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法 # vue.js2.0点击获取自己的属性和jquery方法 # Vue.js列表渲染绑定jQuery插件的正确姿势 # Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题 # vue表单绑定实现多选框和下拉列表的实例 # vue下拉列表功能实例代码 # Vue.js做select下拉列表的实例(ul-li标签仿select标签) # vue 1.x 交互实现仿百度下拉列表示例 # jQuery+vue.js实现的多选下拉列表功能示例 # 在这个 # 自定义 # 小编 # 就会 # 是在 # 在这里 # 会有 # 我现在 # 这个问题 # 所需 # 给大家 # 可以使用 # 一个问题 # 中去 # 表单 # 所述 # 有多种 # 给我留言 # 还可能 # 就可以

返回目录在线咨询

上一篇：php项目怎么分析源码_php项目分析源码逻辑与结构法【教程】
下一篇：高流量网站应该如何选择建站服务器？需要关注哪些指标？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求