vue：鼠标点击画布外的区域时弹窗提示

Question

鼠标点击画布外的区域时，弹出弹窗提示“未保存，是否离开”。
实现这个过程的逻辑是怎样的？

Answer 1

监听body的点击事件，判断触发点击事件的节点是否在画布内

Answer 2

npm搜个clickoutside的插件基本都能用。基本思路就是顶层的click事件，画布元素作为排除条件，也就是点击元素不是目标元素或不在目标元素内。用指令的好处就是可以更好的记录，否则还需要在每次点击事件去扫描。大概思路就是这样，或者看一下别人的源码。

Answer 3

div为画布
<div v-clickoutside="handle"></div>
methods: {
    handle() {
      //处理外部的点击事件,例如 弹窗提示
    },
}

Vue.directive('clickoutside',{
    bind(el, binding, vnode) {
    function documentHandler(e) {
      // el 包含其触发的元素 那当然不能触发啦
      if (el.contains(e.target)) {
        return false;
      }
      // 满足上面条件， 并且expression 的值不为空 触发（希望value是个函数）
      if (binding.expression) {
        //    调用自定义指令传来的函数，e是事件原对象 作为参数（为什么传e 因为有些情况需要把这个对象抛出方便用户的操作）
        binding.value(e);
      }
    }
    el.__vueClickOutside__ = documentHandler;
    // 在document上监听事件
    document.addEventListener('click', documentHandler);
  },
  update() {
  },
  unbind(el, binding) {
    // 取消事件监听（el.__vueClickOutside 派上用场了吧）
    document.removeEventListener('click', el.__vueClickOutside__);
    // 既然都取消了 那么这个属性就没必要存在了
    delete el.__vueClickOutside__;
  }
})

Answer 4

Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = event => {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
})