快捷導(dǎo)航

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

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

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

在開發(fā)過程中，為了效果好看，往往需要自己開發(fā)一個(gè)下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而當(dāng)編寫自定義下拉列表的時(shí)候，就會(huì)碰到一個(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 代碼，有人可能會(huì)使用 document.onclick 來添加根節(jié)點(diǎn)事件。不過，我現(xiàn)在使用 Vue.js，會(huì)選擇使用 Vue.js 的方式處理這個(gè)問題。

Vue.js 使用組件化的方式組織代碼，會(huì)有一個(gè)根組件，可以在這個(gè)根組件上加上 @click 事件，來響應(yīng)區(qū)域外的點(diǎn)擊事件。在一個(gè)完整的應(yīng)用中，可能有多種場(chǎ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)閉下拉列表的功能(自定義下拉列表)，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: