Vue造轮子-popover组件(中)

655 阅读2分钟

1. 现在遇到的问题

  • 如果在popover外面包了个div写上overflow:hidden就会出bug,所以要把弹出的div放到按钮的同一个层级
  • 关于click事件的,之前解决的方式是写click.stop,但是其实还是会有bug,会打断用户的事件链,用户在外面写@click,点击按钮没有用,但是点击按钮周围空白区域会有,那么就会导致别人用了组件无法自己添加click事件,所以不能用stop解决这个问题。

2. 解决overflow:hidden的问题

 methods: {
      xxx(){
        this.visible = !this.visible
        if(this.visible === true) {
          setTimeout(()=>{
          // 主要是下面这四句实现,但是还是有bug
          document.body.appendChild(this.$refs.contentWrapper)
          let {width, height, top, left} = this.$refs.triggerWrapper.getBoundingClientRect()
          this.$refs.contentWrapper.style.left = left + 'px'
          this.$refs.contentWrapper.style.top = top + 'px'
          // 
            let eventHandler = ()=>{
              this.visible = false;
              console.log('document 隐藏 popover')
              document.removeEventListener('click',eventHandler)
            }
            document.addEventListener('click', eventHandler)
          })
        }else{
          console.log('vm 隐藏 popover')
        }
      }


3. 面试题:v-show和v-if的区别,v-if是是否出现在dom树上,v-show是改变其css样式。

4. 解决当容器有 overflow hidden 造成的bug

  • clientRect是相距可视范围,绝对定位相距于body定位。现在我们的浮层是相对于body定位,而按钮获取到的top是相对于window定位而引发的bug。
  • 解决这个问题只要得到两者之间的插值就好解决
   methods: {
      xxx(){
        this.visible = !this.visible
        if(this.visible === true) {
          setTimeout(()=>{
            document.body.appendChild(this['$refs']['contentWrapper'])
            let {top, left} =this['$refs']['triggerWrapper'].getBoundingClientRect()
            // 这两句话解决
            this['$refs']['contentWrapper'].style.left = left + window.scrollX + 'px' 
            this['$refs']['contentWrapper'].style.top = top + window.scrollY +'px'
            // 
            let eventHandler = ()=>{
              this.visible = false;
              console.log('document 隐藏 popover')
              document.removeEventListener('click',eventHandler)
            }
            document.addEventListener('click', eventHandler)
          })
        }else{
          console.log('vm 隐藏 popover')
        }
      }

5. 解决外部点击click无效的问题。

    // 先将点按钮和点外面的逻辑分开
    onClick(event){
      if(this.$refs.triggerWrapper.contains(event.target)){
        console.log('按钮')
        this.visible = !this.visible
        
      } else {
        console.log('其它')
      }
    }

    // 将之前的代码移动进去
     methods: {
      onClick(event){
        if(this.$refs.triggerWrapper.contains(event.target)){
          this.visible = !this.visible
          if(this.visible === true) {
            setTimeout(() => {
              document.body.appendChild(this['$refs']['contentWrapper'])
              let {top, left} = this['$refs']['triggerWrapper'].getBoundingClientRect()
              this['$refs']['contentWrapper'].style.left = left + window.scrollX + 'px'
              this['$refs']['contentWrapper'].style.top = top + window.scrollY + 'px'
              let eventHandler = (e) => {
                if(this['$refs']['contentWrapper'].contains(e.target)){ 
                  // 这句话解决了点击内容消失的问题
                } else {
                  this.visible = false;
                  document.removeEventListener('click', eventHandler)
                  console.log('关闭') // document事件引起的
                }
              }
              document.addEventListener('click', eventHandler)
            })
          }
        } else {
          console.log('非按钮')
        }
      }
    }

6.开始重构上面那段代码

      methods: {
      positionContent() {
        document.body.appendChild(this["$refs"]["contentWrapper"])
        let {top, left} = this["$refs"]["triggerWrapper"].getBoundingClientRect()
        this["$refs"]["contentWrapper"].style.left = left + window.scrollX + "px"
        this["$refs"]["contentWrapper"].style.top = top + window.scrollY + "px"
      },
      listenToDocument() {
        let eventHandler = (e) => {
          if (this["$refs"]["contentWrapper"].contains(e.target)) { // 这句话解决了点击内容消失的问题
          } else {
            this.visible = false
            console.log('关闭')
            document.removeEventListener("click", eventHandler)
            console.log("关闭") // document事件引起的
          }
        }
        document.addEventListener("click", eventHandler)
      },
      listenToDocument(){
        let eventHandler = (e) => {
          if ( this["$refs"]["contentWrapper"] &&
            this["$refs"]["contentWrapper"].contains(e.target)) { // 这句话解决了点击内容消失的问题
            return
          } else {
            this.visible = false
            document.removeEventListener("click", eventHandler)
            console.log("关闭") // document事件引起的
          }
        }
        document.addEventListener("click", eventHandler)
      },
      opShow(){
        setTimeout(() => {
          this.positionContent()
          this.listenToDocument()
        })
      },
      onClick(event) {
        if (this["$refs"]["triggerWrapper"].contains(event.target)) {
          this.visible = !this.visible
          if (this.visible === true) {
            this.opShow()
          } else {
            console.log('关闭')
          }
        }
      }
    },

7. 还有一个bug,上面打印关闭,关闭了两次

  • 原因是document会去关闭它,onClick也会去关闭它
  • 我们需要把关闭入口收拢,这个就是代码的紧密性,也就是高内聚低耦合的内聚。
      methods: {
      onClickDocument(e){
        if ( this["$refs"]["popover"] && (this["$refs"]["popover"] &&
          this["$refs"]["popover"].contains(e.target))) {return}
        else {
          this.close()
        }
      },
      positionContent() {
        document.body.appendChild(this["$refs"]["contentWrapper"])
        let {top, left} = this["$refs"]["triggerWrapper"].getBoundingClientRect()
        this["$refs"]["contentWrapper"].style.left = left + window.scrollX + "px"
        this["$refs"]["contentWrapper"].style.top = top + window.scrollY + "px"
      },

      open(){ // 打开的收拢
        this.visible = true
        setTimeout(() => {
          this.positionContent()
          document.addEventListener("click", this.onClickDocument)
        })
      },
      close(){ // 关闭的收拢
        this.visible = false
        document.removeEventListener("click", this.onClickDocument)
      },
      onClick(event) {
        if (this["$refs"]["triggerWrapper"].contains(event.target)) {
          if (this.visible === true) {
            this.close()
          } else {
            this.open()
          }
        }
      }
    },
    // 所有重要的操作都要进行收拢

最后,个人微信,欢迎交流!

wechat.jpg