在開發(fā)過程中，為了效果好看，往往需要自己開發(fā)一個(gè)下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而當(dāng)編寫自定義下拉列表的時(shí)候，就會碰到一個(gè)問題：如果用戶在下拉列表的范圍外進(jìn)行鼠標(biāo)點(diǎn)擊的操作，如何關(guān)閉已經(jīng)打開的下拉列表？

解決思路如下：在 DOM 的根節(jié)點(diǎn)上添加一個(gè) click 事件，同時(shí)下拉列表內(nèi)阻止事件的默認(rèn)行為和冒泡。當(dāng)響應(yīng)這個(gè)點(diǎn)擊事件的時(shí)候，說明是在下拉列表范圍外的點(diǎn)擊（因?yàn)橄吕斜韮?nèi)阻止了事件的冒泡），就可以關(guān)閉已經(jīng)打開的下拉列表。

如果是純 JS 代碼，有人可能會使用 document.onclick 來添加根節(jié)點(diǎn)事件。不過，我現(xiàn)在使用 Vue.js，會選擇使用 Vue.js 的方式處理這個(gè)問題。

Vue.js 使用組件化的方式組織代碼，會有一個(gè)根組件，可以在這個(gè)根組件上加上 @click 事件，來響應(yīng)區(qū)域外的點(diǎn)擊事件。在一個(gè)完整的應(yīng)用中，可能有多種場景需要這種區(qū)域外點(diǎn)擊關(guān)閉的功能。除了最普通的表單里的下拉列表外，還可能是網(wǎng)站右上角的消息提示框，或者菜單。比較合適的做法是把點(diǎn)擊事件的具體處理邏輯放到各個(gè)組件中去。

那么如何讓各個(gè)子組件響應(yīng)根組件上的點(diǎn)擊事件呢？可以使用Vuex來做到這一點(diǎn)。在這里 Vuex 起到了組件之間互相傳遞信息的作用。

讀者可以在這個(gè)網(wǎng)址下載我編寫的 Demo 項(xiàng)目：

推薦讀者使用 yarn install 安裝所需的依賴。

下面說一下關(guān)鍵代碼：

程序入口 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)})

根節(jié)點(diǎn) App.vue，添加了點(diǎn)擊事件。

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

以上所述是小編給大家介紹的Vue.js實(shí)現(xiàn)在下拉列表區(qū)域外點(diǎn)擊即可關(guān)閉下拉列表的功能(自定義下拉列表)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！