时间戳

首页 > 解决方案 > 是否可以向 Vue 2 的“on”指令添加自定义事件？

javascript - 是否可以向 Vue 2 的“on”指令添加自定义事件？

问题描述

我正在尝试向 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>

标签： javascriptvuejs2

解决方案

正如 MichalLevý 回答的那样，我试图做的事情是不可能的，最好的选择是采用指令方法。

推荐阅读