使用場景：

在Vue組件中點擊某元素之外的地方移除該元素

需求：

如上圖所示，“用戶列表”頁面有三個Vue組件組成，分別是“菜單組件”，“導航組件”和“列表組件”。其中“列表組件”中包含一個“下拉菜單”，當我們點擊“下拉菜單”以外的區域隱藏下拉菜單。

解決方法一：

出現“下拉菜單”的同時，建一個透明的遮罩層，然后只有“下拉菜單”可以點，點擊遮罩層就隱藏。

缺點：z-index層數要控制好，還有就是如果點擊其他功能按鈕，會失效，因為有遮罩層，導致要點擊兩次才有效。

解決方法二：

局部監聽，給“列表組件”最外層的盒子加個點擊事件，隱藏下拉菜單。并且對“下拉菜單”的事件要阻止事件冒泡。

缺點：點擊“列表組件”區域有效，點擊“菜單組件”和“導航組件”區域無效。

解決方法三（推薦）：

第一步：定義Vue全局點擊函數

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

tips：

1、參數為點擊的回調函數。

2、Vue中通過getElementsByTagName獲取不到body節點，還不知道是什么原因。

第二步：在組件中監聽全局的點擊事件

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

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

第三步：進行操作

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

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

以上這篇在Vue組件中獲取全局的點擊事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。