vue点击菜单显示侧边栏后，点击遮罩层隐藏侧边栏

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)
  }
 })

也有一些其他的方法，但这些有个前提是要操作的对象事先存在

我的侧边栏事先并不存在，点击菜单图标后才显示，如果用上面这种方法这样侧边栏就会出现然后马上消失（本身加了动画效果）
又找了很久这个问题，期间看到一个暴躁老哥写的这个问题的博客，点击其他区域关闭-暴躁老哥
确实哈，毕竟自学一些东西着实苦恼

他们讨论的方法还是没有解决问题，click、contains这些代码可能还需要研究

提出的其中一种办法

mounted(){
    document.addEventListener('click',e=>{
        if(!this.$el.contains(e.target)){
            this.show=false //这句话的意思是点击其他区域关闭（也可以根据自己需求写触发事件）
        }
    })
}

还是用不明白，报错

思来想去，还是加个遮罩层

给这个遮罩层一个和侧边栏同样的v-show判断:isShowSide

data() {
       return {
           isShowSide:false
       }
   },

当侧边栏显示时，遮罩层显示，给遮罩层添加点击事件，设置isShowSide为false