vue点击元素自身之外触发事件指令

你可以使用Vue的自定义指令来实现点击元素自身之外触发事件的功能。具体的实现方式如下：

1. 在Vue实例中定义一个自定义指令，比如叫做v-click-outside。

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // 判断是否点击了el元素内部
      if (!(el == event.target || el.contains(event.target))) {
        // 如果点击了el元素外部，则触发绑定的方法
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  },
});

2. 在需要使用该指令的元素上使用v-click-outside指令，并绑定一个方法。

<div v-click-outside="handleClickOutside">点击我以外的区域触发事件</div>

methods: {
  handleClickOutside: function (event) {
    console.log('点击了元素之外的区域');
  },
},

这样，当你点击该元素之外的区域时，就会触发handleClickOutside方法。