Vue造轮子-popover组件(上)

1. popover是什么以及难点在哪

点一下出现一个卡片,也叫气泡卡片
难点在于css的样式

2. 用户会怎么去用

  // 第一种做法，用插槽做
  
    
    
  

  // 第二种做法，用指令做，这种方式不太用，指令大多数是造轮子用的所以就用第一种方法做

3. 为什么要用用inline-block，因为这样多个popover组件才不会一行

// popover.vue

  .popover{
    display: inline-block;
    vertical-align: top;
  }

// index.html

4. 优秀的前端css一定是写的很6的

    // popover.vue
    

    

    
    .popover{
 display: inline-block;
 vertical-align: top;
 position: relative;
 .content-wrapper{
 position: absolute;
 bottom: 100%;
 left: 0;
 border: 1px solid red;
 box-shadow: 0 0 3px rgba(0,0,0,0.5);
 }
    }

5. 开始完善功能,实现点外面之后内容消失

    // 这样写会出现bug,刚出现外面就会点击，也就是刚开启就会关闭
    // 出现原因是点击的时候就建了eventListener,而不是出现了再建eventListener
    // 具体涉及到原生js的一些核心，叫做事件机制，事件的冒泡机制
    methods: {
      xxx(){ 
 this.visible = !this.visible
 console.log('切换 visible')
 if(this.visible === true) {
   document.body.addEventListener('click', ()=>{
     this.visible = false
     console.log('点击body就关闭popover')
   })
 }
      }
    }
    // 这个bug用异步解决

6.解决第三次点击不行

第一步

    if(this.visible === true) {

 // 这样写还是不行
 // this.$nextTick(() => {
 //   document.addEventListener('click', ()=>{
 //     this.visible = false
 //     console.log("进入click")
 //     console.log(this.visible);
 //   })
 // })

 setTimeout(()=>{
     document.addEventListener('click', ()=>{
     this.visible = false
     console.log("进入click")
     console.log(this.visible);
     })
 })
    }

第二步

    methods: {
      xxx(){
 this.visible = !this.visible
 if(this.visible === true) {
   setTimeout(()=>{
     console.log("新增 document click 监听器")
     document.addEventListener('click',
function x(){
  this.visible = false;
  console.log('删除监听器')
  document.removeEventListener('click',x)
  // 但是这句话有问题，我删除的x，并不是我绑定的,我绑定的是x,bind this之后的新函数，
  console.log('点击body就关闭popover')
}.bind(this)
     )
   })
 }
      }
    }
    // 这样写也有个坑,原因是
    x()
    x.bind()会变成一个新的函数,

第三步

 methods: {
      xxx(){
 this.visible = !this.visible
 console.log(this.visible)
 console.log('切换 visible')
 if(this.visible === true) {
   setTimeout(()=>{
     let eventHander = ()=>{
this.visible = false;
document.removeEventListener('click',eventHander)
     }
     document.addEventListener('click', eventHander)
   })
 }
      }
    }

解决点击popover关闭的bug,实现最简单的popover

 // 通过以下代码发现vm 隐藏了一次popover，document隐藏了一次
 methods: {
   xxx(){
     this.visible = !this.visible
     if(this.visible === true) {
setTimeout(()=>{
  let eventHandler = ()=>{
    this.visible = false;
    console.log('document 隐藏 popover')
    document.removeEventListener('click',eventHandler)
  }
  document.addEventListener('click', eventHandler)
})
     }else{
console.log('vm 隐藏 popover')
     }
   }
 }
 // 所以需要阻止冒泡,让popover事件在其内部进行处理就可以了

8. 目前还有哪些没有实现

用户有的时候希望是hover的时候显示，支持多种事件
假设在外面写一个div，有overflow:hidden的属性就会出bug，这就是其它的框架都把popover放外面的原因

Vue造轮子-popover组件(上)

JavaScript相关栏目本月热门文章