Vue.js 自定义指令使用 TypeScript 检测点击外部元素

Question

我正在尝试使用此示例创建自定义指令：https://stackoverflow.com/a/42389266/5470563

main.ts 文件：

import Vue from 'vue';
import HeaderNav from './components/HeaderNav.vue'

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
            // here I check that click was outside the el and his childrens
            if (!(el == event.target || el.contains(event.target))) {
                // and if it did, call method provided in attribute value
                vnode.context[binding.expression](event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent)
    },
});

new Vue({
    el: '#app',
        components: {
            HeaderNav
        }
});

我得到一个编译错误：

“HTMLElement”类型上不存在属性“clickOutsideEvent”。

我该如何解决？或者有没有更好的解决方案来绑定外部元素点击事件？

Answer 1

你有两个选择

将bind、unbind 函数中的el 参数转换为any。

bind: function (el: any, binding, vnode) {
unbind: function (el: any) {

扩展HTMLElement接口。

你可以把它放在指令声明之前。

interface HTMLElement {
  clickOutsideEvent: () => void;
}

Answer 2

这是我目前使用的一个实现，希望对您有所帮助：

export default {
  bind: function(el, binding, vNode) {
    // Provided expression must evaluate to a function.
    if (typeof binding.value !== "function") {
      const compName = vNode.context.name;
      let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;
      if (compName) {
        warn += `Found in component '${compName}'`;
      }

      console.warn(warn);
    }
    // Define Handler and cache it on the element
    const bubble = binding.modifiers.bubble;
    const handler = e => {
      if (bubble || (!el.contains(e.target) && el !== e.target)) {
        binding.value(e);
      }
    };
    el.__vueClickOutside__ = handler;
    // add Event Listeners
    document.addEventListener("mousedown", handler);
  },
  unbind: function(el, binding) {
    // Remove Event Listeners
    document.removeEventListener("mousedown", el.__vueClickOutside__);
    el.__vueClickOutside__ = null;
  }
};

然后在你的主文件中注册指令

// Directives
Vue.directive("click-outside", ClickOutside);