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放外面的原因

最後，歡迎交流