1. 90前端首页
  2. 前端框架

Vue造轮子-popover组件(上)

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

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

2. 用户会怎么去用

  // 第一种做法,用插槽做
  <g-popover>
    <template slot=\"content\">
      <div></div>
    </template>
    <template slot=\"trigger\">
      <button>点我</button>
    </template>
  </g-popover>

  // 第二种做法,用指令做,这种方式不太用,指令大多数是造轮子用的所以就用第一种方法做
  <div ref=\"xxx\"></div>
  <button v-popover=\"$refs.xxx\"></button>

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

// popover.vue
<template>
  <div class=\"popover\">
    <slot name=\"content\"></slot>
    <slot></slot>
  </div>
</template>
  .popover{
    display: inline-block;
    vertical-align: top;
  }

// index.html
<div id=\"app\">
  <g-popover>
    <template slot=\"content\">
      <div>popover内容1</div>
    </template>
      <button>点我1</button>
  </g-popover>
  <g-popover>
    <template slot=\"content\">
      <div>popover内容2</div>
    </template>
      <button>点我2</button>
  </g-popover>
</div>

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

    // popover.vue
    <template>
    <div class=\"popover\" @click=\"xxx\">
        <div class=\"content-wrapper\" v-if=\"visible\" >
        <slot name=\"content\"></slot>
        </div>
        <slot></slot>
    </div>
    </template>

    <script lang=\"ts\">
    export default {
        name: \"GuluPopover\",
        data (){
        return {visible:false}
        },
        methods: {
        xxx(){
            this.visible = !this.visible
        }
        }
    }
    </script>

    <style lang=\"scss\" scoped>
    .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);
        }
    }
    </style>

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)
          })
        }
      }
    }
  1. 解决点击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事件在其内部进行处理就可以了
    <div class=\"popover\" @click.stop=\"xxx\">
       <div class=\"content-wrapper\" v-if=\"visible\" @click.stop>
         <slot name=\"content\"></slot>
       </div>
       <slot></slot>
     </div>
    

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

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021656694

展开阅读全文

发表评论

登录后才能评论