Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關閉下拉列表的功能(自定義下拉列表)

更新時間：2017年05月30日 11:47:53 作者：zhangchao19890805

這篇文章主要介紹了Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關閉下拉列表的功能(自定義下拉列表) ,需要的朋友可以參考下

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

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

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

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

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

讀者可以在這個網(wǎng)址下載我編寫的 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)
})

根節(jié)點 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實現(xiàn)在下拉列表區(qū)域外點擊即可關閉下拉列表的功能(自定義下拉列表)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: