【通俗易懂】vue点击按钮显示隐藏另一个元素，并且实现点击空白区域隐藏另一个元素功能

功能讲解

网上看到很多帖子都是答非所问，或者给的解决办法只有一半，根本不是我要得功能。

我要的功能是：有一个按钮，有一个页面，我点击按钮的时候页面可以显示，再点击可以隐藏，一直循环。同时页面显示的时候点击页面区域是不会关闭的，但是点击页面区域之外的地方就会把页面关闭。类似于elementul弹框的那种点击空白处或者点击遮罩层直接关闭弹框的效果

上代码

html部分：这里注意一个是按钮，一个是显示页面，我们之所以可以点击之外的区域可以隐藏，是在外面包了一个div，div上写的v-cloak v-clickoutside="outsideClose"这个是重点

    <!-- 点击按钮可以显示隐藏，点击显示的区域不关闭，如果点击的是显示区域之外的地方关闭显示区域 -->
    <div v-cloak v-clickoutside="outsideClose">
      <div @click="show = !show">按钮</div>
      <div v-show="show">显示</div>
    </div>

js部分：这里注意clickoutside这个方法就是通过上面divv-clickoutside="outsideClose"绑定的，所以不要纠结为什么没有获取元素之类的。我看网上帖子好多都是就发了一个方法，然后也没解释，下面评论都在问这个方法不用绑定元素吗之类的。这不是坑新人吗。

<script>
export default {
  data() {
    return { 
      //这个是显示隐藏的变量
      show: true
       };
  },
  //这个是主要用来判断是不是区域外的方法
  directives: {
    clickoutside: {
      //初始化，这边判断是否是区域之外
      bind(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        function KeyUp(e) {
          if (e.keyCode == 27) {
            if (binding.expression) {
              binding.value(e);
            }
          }
        }
        el.__vueClickOutSize__ = documentHandler;
        el.__vueKeyup__ = KeyUp;

        document.addEventListener("keyup", KeyUp);
        document.addEventListener("click", documentHandler);
      },
      //销毁事件监听
      unbind(el, binding) {
        document.removeEventListener("click", el.__vueClickOutSize__);
        delete el.__vueClickOutSize__;

        document.removeEventListener("keyup", el.__vueKeyup__);
        delete el.__vueKeyup__;
      },
    },
  },
  methods: {
    //如果是区域外调用方法隐藏页面
    outsideClose() {
      this.show = false;
    },
  },
};
</script>