【发布时间】：2021-07-12 22:08:09
【问题描述】：
我正在尝试向 Vue 的全局“on”指令添加一个“clickaway”事件，以便在 Vue 模板中使用它，如下所示：
<div v-on:clickaway="someMethod">
</div>
所以 JavaScript 看起来像这样：
import Vue from 'vue';
Vue.directive('on', {
// Default 'On' functionality here
// My method that checks if 'clickaway' has been passed in as an argument
});
这可能吗？
编辑：
希望澄清我的目标，我目前已经按照我希望的方式在指令中工作：
Vue.directive('clickaway', {
bind(element, { expression }, { context }) {
element.clickAwayEvent = event => {
if (!(element === event.target || element.contains(event.target))) {
context[expression](event);
}
};
document.body.addEventListener('click', element.clickAwayEvent);
},
unbind(element) {
document.body.removeEventListener('click', element.clickAwayEvent);
},
});
还有标记：
<div v-clickaway="closeDropdown"></div>
但不是在自定义指令中，我希望能够这样写：
<div v-on:clickaway="closeDropdown"></div>
【问题讨论】：
-
这可能是XY problem；您是想为每个
div添加一个自定义（合成）事件，还是真的需要挂钩到 Vue 的事件逻辑以在 any 事件触发时运行一些代码？使用v-on语法在本机 dom 元素上监听自定义事件没有任何限制。请注意，本机 dom 元素上的自定义事件与上面链接的自定义组件事件不同（另请参阅vuejs.org/v2/api/#v-on）。 -
@MichalLevý 不是我要找的 - clickaway 事件的独特之处在于它需要所有组件都可以访问，因此典型的发送到父级 -> 监听事件范式并不合适.我过去的做法是使用事件总线向一个不可见的覆盖组件发出信号，该组件会监听点击以显示并持有一个点击事件，如果点击该事件会自行关闭，但这有点混乱。目前我已经让它与一个可以在任何地方使用的指令（例如 v-clickaway）一起工作，但我试图使语法与任何其他事件的语法相同
-
@chipit24 希望我的上述回复能澄清一些。您的链接绝对是我想要的更多；但是，我不确定它是否能完全解决我的问题。我正在寻找根 Vue 实例来侦听从代码中的任何位置触发的自定义事件，并使用一个处理程序来检查我将事件分配给的下拉组件是否是目标，如果不是，则触发我传入的方法。因此组件上的代码将为
<div @clickaway="closeDropdown">markup here</div>，Vue 将识别何时执行该点击代码 -
您不能“扩展”现有指令（如“v-on”）。 Vue 事件也不会像标准浏览器事件那样冒泡。如果它适合您，只需使用
v-clickaway方法...
标签： javascript vuejs2