Vue.轮儿之popover 记录

需求决定bug

一

xxx(){
      this.visible=!this.visible;
      if (this.visible ===true){
        document.addEventListener('click',()=>{
      this.visible=false
})
}

这里的Bug是因为当点击一次 时这两个事件都进行了
即this.visible先等于了true又等于了false 相当于什么都没干

解决方案

用异步来进行处理

1. setTimeout
2. vm.$nextTrick

 this.$nextTick(()=>{
        document.addEventListener('click',()=>{
      this.visible=false     };

二 事件监听完之后未取消

每次的点击都会在document上添加一个监听事件，点N次就添加了N个

解决方案

在visible变成false的时候取消监听

 this.$nextTick(()=>{
        document.addEventListener('click',function cancel(){
      this.visible=false
      document.removeEventListener('click',cancel)
     };
   };

三 用bind引来的Bug

事件监听我们必须引入bind来将真正的this传入但是
.bind会返回一个新的函数 ，如果用事件监听addEventListener的话
即

      document.addEventListener('click',function cancel{
          this.visible=false;
          document.removeEventListener('click')
      }).bind(this)

并不会起作用
这时候因为上面bind是返回一个新的函数，删除的事件不是一个事件的函数，因此起不到作用

解决方案

用箭头函数

if (this.visible ===true){
                    this.$nextTick(()=>{
                        let eventHandle=()=>{
                            this.visible=false;
                            document.removeEventListener('click',eventHandle)
                        };
                        document.addEventListener('click',eventHandle)
                    });
                }

还有一点是在Vue中使用添加一个事件