亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在Vue組件中獲取全局的點(diǎn)擊事件方法

 更新時(shí)間：2018年09月06日 08:42:40   作者：鍵盤(pán)上的草根舞者  
今天小編就為大家分享一篇在Vue組件中獲取全局的點(diǎn)擊事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

使用場(chǎng)景：

在Vue組件中點(diǎn)擊某元素之外的地方移除該元素

需求：

如上圖所示，“用戶(hù)列表”頁(yè)面有三個(gè)Vue組件組成，分別是“菜單組件”，“導(dǎo)航組件”和“列表組件”。其中“列表組件”中包含一個(gè)“下拉菜單”，當(dāng)我們點(diǎn)擊“下拉菜單”以外的區(qū)域隱藏下拉菜單。

解決方法一：

出現(xiàn)“下拉菜單”的同時(shí)，建一個(gè)透明的遮罩層，然后只有“下拉菜單”可以點(diǎn)，點(diǎn)擊遮罩層就隱藏。

缺點(diǎn)：z-index層數(shù)要控制好，還有就是如果點(diǎn)擊其他功能按鈕，會(huì)失效，因?yàn)橛姓谡謱樱瑢?dǎo)致要點(diǎn)擊兩次才有效。

解決方法二：

局部監(jiān)聽(tīng)，給“列表組件”最外層的盒子加個(gè)點(diǎn)擊事件，隱藏下拉菜單。并且對(duì)“下拉菜單”的事件要阻止事件冒泡。

缺點(diǎn)：點(diǎn)擊“列表組件”區(qū)域有效，點(diǎn)擊“菜單組件”和“導(dǎo)航組件”區(qū)域無(wú)效。

解決方法三（推薦）：

第一步：定義Vue全局點(diǎn)擊函數(shù)

// 定義全局點(diǎn)擊函數(shù)
Vue.prototype.globalClick = function (callback) {
 document.getElementById('main').onclick = function () {
 callback();
 };
};

tips：

1、參數(shù)為點(diǎn)擊的回調(diào)函數(shù)。

2、Vue中通過(guò)getElementsByTagName獲取不到body節(jié)點(diǎn)，還不知道是什么原因。

第二步：在組件中監(jiān)聽(tīng)全局的點(diǎn)擊事件

mounted: function () {
 this.globalClick(this.moreSetupMenuRemove);
}

tips：mounted是Vue生命周期鉤子中的DOM渲染完成階段。

第三步：進(jìn)行操作

// 移除操作
moreSetupMenuRemove () {
 this.$refs.moreSetupMenu.style.display = 'none';
},

如果有更好的方法，歡迎交流！

以上這篇在Vue組件中獲取全局的點(diǎn)擊事件方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論