<template>
        <div v-clickoutside="clickEventspace">
          <ul>
            <li>显示1</li>
            <li>显示2</li>
          </ul>
        </div>
  </template>

<script>
// 提交测试
export default {
    
    
  name: "testContent3",
  //实现点击div元素外出发事件
  directives: {
    
    
    clickoutside: {
    
    
      bind: function (el, binding, vnode) {
    
    
        function documentHandler(e) {
    
    
          if (el.contains(e.target)) {
    
    
            return false;
          }
          if (binding.expression) {
    
    
            binding.value(e);
          }
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function (el, binding) {
    
    
        document.removeEventListener("click", el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      },
    },
  },
  data() {
    
    
    return {
    
    
    };
  },
  methods: {
    
    
    clickEventspace() {
    
    
      console.log("点击了div元素外");
      // 隐藏上下文菜单
      this.contextMenu.show = false;
    },
  },
};
</script>