el-popover氣泡彈出框屬性及方法

氣泡彈出框：

一般有三種觸發形式：hover, click 和 focus，在彈框中可以自定義內容，比較多變。


如上，比如我們通過click點擊來控制氣泡的顯示隱藏，當點擊測試div時，氣泡顯示，再點擊頁面任意位置或者測試div時，氣泡會隱藏，但有時候我們需要不觸發它的點擊事件而是手動來控制氣泡的顯示隱藏，或者當氣泡顯示隱藏時可以監聽到它的狀態然后做些別的處理，這時候就用到它的一些方法。

 

屬性及方法：

1.屬性：

popper-class="popverClass"：el-popover與app.vue同級，所以在頁面上直接改樣式是改動不了的，加上這個屬性並去掉scoped即可修改；

ref="popverRef"：給el-popover一個唯一標識，操作氣泡的時候可以通過refs來獲取到；

trigger="click"：表示以哪種方式觸發。

2.方法：

doShow()：手動控制顯示氣泡；

doClose()：手動控制隱藏氣泡；

@show：監聽氣泡顯示時的方法；

@hide：監聽氣泡隱藏時的方法。

 

實現代碼：

1.html：

<div class="about">
  <el-popover
    ref="popverRef"
    placement="right"
    width="300"
    trigger="click"
    popper-class="popverClass"
    @show="showPopver"
    @hide="hidePopver"
  >
    <!-- 觸發事件 -->
    <div class="div_test" slot="reference">測試</div>
    <!-- 彈框內容 -->
    <div class="div_content">
      <div class="content_checkbox">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="復選框 A"></el-checkbox>
          <el-checkbox label="復選框 B"></el-checkbox>
          <el-checkbox label="復選框 C"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="content_butts">
        <el-button>取消</el-button>
        <el-button type="primary">應用</el-button>
      </div>
    </div>
  </el-popover>
</div>

2.css：

<style lang="scss" scoped>
.about {
  display: flex;
  justify-content: center;
  .div_test {
    width: 40px;
  }
}
</style>

<style lang="scss">
.el-popover.popverClass {
  .div_content {
    .content_checkbox {
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
      }
    }
    .content_butts {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      .el-button {
        padding: 7px 14px;
      }
    }
  }
}
</style>

3.js方法：

this.$refs.popverRef.doShow(); // 顯示彈框
this.$refs.popverRef.doClose(); // 隱藏彈框

// 監聽彈框顯示時的方法
showPopver(){
  // 處理
},
// 監聽彈框隱藏時的方法
hidePopver(){
  // 處理
},

　　

注意：

1.在氣泡上加上ref表示是給氣泡加了一個唯一標識，但是氣泡也可以用在v-for循環中，這時候ref代表的就不僅僅只是一個了，它會是一個數組，通過[index]來獲取對應的氣泡即可，操作方法與單個一致。

2.不使用氣泡直接用div加定位來寫也是可以的，實現方法多種，但如果需求中包含點擊任意空白位置彈框要隱藏的話，這時候就需要監聽點擊事件然后做一系列的操作，實現繁瑣，bug較多，不推薦。

3.參考博客：https://www.freesion.com/article/8488146656/