欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏

 更新時(shí)間：2023年12月12日 14:52:42   作者：MtiredM  
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下

說明

element ui 2.x中，el-popover的顯示隱藏有4種觸發(fā)方式：click/focus/hover/manual，分別是點(diǎn)擊/聚焦/懸浮/手動(dòng)，正常情況這幾個(gè)觸發(fā)方式已經(jīng)能滿足大部分需求，但有些業(yè)務(wù)場(chǎng)景需要通過代碼自動(dòng)觸發(fā)彈框展示

例如：在后臺(tái)請(qǐng)求響應(yīng)返回后，自動(dòng)打開彈框展示內(nèi)容，這時(shí)我們?nèi)绻褂玫腸lick（click已驗(yàn)證，focus/hover未驗(yàn)證）觸發(fā)方式，則無法通過js顯示彈框

如果使用manual觸發(fā)方式，主動(dòng)添加點(diǎn)擊事件，可以通過js顯示彈框，但無法實(shí)現(xiàn)點(diǎn)擊空白處關(guān)閉彈框，但此方案已基本接近最終需求，針對(duì)點(diǎn)擊空白處關(guān)閉提供全局點(diǎn)擊事件處理即可，具體示例如下：

代碼示例

<el-popover
  ref="myPopover"
  :value="showPopover"
  placement="bottom"
  width="550"
  trigger="manual"
  :open-delay="500"
  @show="openPopover"
  @hide="closePopover"
>
  <el-table>....彈框展示內(nèi)容...</el-table>
  <el-tooltip slot="reference" content="彈框展示" effect="dark" placement="bottom">
  	<!-- 主動(dòng)點(diǎn)擊實(shí)現(xiàn)彈框展示關(guān)閉 -->
    <span class="hover-effect" @click="trigger">
      <svg-icon icon-class="popover1" />
    </span>
  </el-tooltip>
</el-popover>

data() {
  return {
    showPopover: false
  }
},
methods: {
  trigger() {
   //點(diǎn)擊控制彈框展示/關(guān)閉
   this.showPopover= !this.showPopover
  },
  openPopover() {
    //彈框展示時(shí)注冊(cè)全局點(diǎn)擊事件
    document.addEventListener('click', this.hidePopover, false)
  },
  closePopover() {
    //彈框關(guān)閉時(shí)移除全局點(diǎn)擊事件
    document.removeEventListener('click', this.hidePopover, false)
  },
  hidePopover(e) {
    // 全局點(diǎn)擊事件，檢測(cè)當(dāng)前點(diǎn)擊位置不包含彈框的元素，則隱藏彈框
    if (!this.$refs.myPopover.$el.contains(e.target)) {
      this.showPopover= false
    }
  }
}

總結(jié) 

到此這篇關(guān)于el-popover如何通過js手動(dòng)控制彈出框顯示、隱藏的文章就介紹到這了,更多相關(guān)el-popover手動(dòng)控制彈出框顯示隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論