在開發過程中，為了效果好看，往往需要自己開發一個下拉列表，而不是使用 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實現在下拉列表區域外點擊即可關閉下拉列表的功能(自定義下拉列表)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！