在Vue中，除了默認(rèn)的@click事件之外，我們還可以通過(guò)v-on來(lái)實(shí)現(xiàn)更多的事件綁定。通過(guò)全局的事件監(jiān)聽(tīng)器，我們可以很方便地捕獲到頁(yè)面上的任何一個(gè)元素的點(diǎn)擊事件。下面是一個(gè)簡(jiǎn)單的示例：

Vue.config.keyCodes.f1 = 112;
document.addEventListener('keydown', function(event) {
if (event.keyCode === 112) {
alert('You pressed F1');
}
});

上面的代碼為我們注冊(cè)了一個(gè)全局的按鍵事件，當(dāng)用戶按下F1時(shí)，會(huì)彈出一個(gè)提示框。這里我們使用了Vue.config.keyCodes來(lái)注冊(cè)自定義的按鍵碼，然后通過(guò)document.addEventListener來(lái)監(jiān)聽(tīng)按鍵事件。同樣的道理，我們也可以注冊(cè)全局的點(diǎn)擊事件：

// 注冊(cè)全局點(diǎn)擊事件
Vue.directive('click-outside', {
bind: function(el, binding, vnode) {
el.clickOutsideEvent = function(event) {
// 判斷點(diǎn)擊的元素是否為當(dāng)前元素或子元素
if (!(el === event.target || el.contains(event.target))) {
// 如果不是，則執(zhí)行回調(diào)函數(shù)
vnode.context[binding.expression](event);
}
}
document.addEventListener('click', el.clickOutsideEvent);
},
unbind: function(el) {
document.removeEventListener('click', el.clickOutsideEvent);
}
});

上面的代碼使用了Vue.directive來(lái)注冊(cè)一個(gè)全局指令，在指令的bind函數(shù)中我們注冊(cè)了一個(gè)點(diǎn)擊事件的回調(diào)函數(shù)，然后使用document.addEventListener來(lái)監(jiān)聽(tīng)全局的點(diǎn)擊事件。在回調(diào)函數(shù)中，我們判斷點(diǎn)擊的元素是否為當(dāng)前元素或者它的子元素，如果不是，則執(zhí)行傳入的回調(diào)函數(shù)。

使用時(shí)，我們只需要在任何一個(gè)元素上使用v-click-outside指令，并傳入一個(gè)回調(diào)函數(shù)即可：

點(diǎn)擊我之外的任何地方都會(huì)執(zhí)行doSomething函數(shù)

上面的代碼中，在div元素上使用了v-click-outside指令，然后將doSomething函數(shù)作為指令的參數(shù)傳入。當(dāng)用戶在div元素之外點(diǎn)擊任何一個(gè)元素時(shí)，就會(huì)執(zhí)行doSomething函數(shù)。