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

更新時間：2023年12月12日 14:52:42 作者：MtiredM

最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下

說明

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

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

如果使用manual觸發(fā)方式，主動添加點(diǎn)擊事件，可以通過js顯示彈框，但無法實(shí)現(xiàn)點(diǎn)擊空白處關(guān)閉彈框，但此方案已基本接近最終需求，針對點(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">
  	<!-- 主動點(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() {
    //彈框展示時注冊全局點(diǎn)擊事件
    document.addEventListener('click', this.hidePopover, false)
  },
  closePopover() {
    //彈框關(guān)閉時移除全局點(diǎn)擊事件
    document.removeEventListener('click', this.hidePopover, false)
  },
  hidePopover(e) {
    // 全局點(diǎn)擊事件，檢測當(dāng)前點(diǎn)擊位置不包含彈框的元素，則隱藏彈框
    if (!this.$refs.myPopover.$el.contains(e.target)) {
      this.showPopover= false
    }
  }
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
深入理解Vue.js輕量高效的前端組件化方案
這篇文章主要介紹了深入理解Vue.js輕量高效的前端組件化方案 ,需要的朋友可以參考下
2018-12-12
vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件代碼示例
在前端開發(fā)中我們通常會遇到這樣的需求,用戶離開、刷新頁面前,修改數(shù)據(jù)未進(jìn)行保存操作,需要提示框提醒用戶,這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件的相關(guān)資料,需要的朋友可以參考下
2023-08-08
Vue.js表單控件綁定示例盤點(diǎn)
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
vite+vue3項(xiàng)目解決低版本兼容性問題解決方案(Safari白屏)
這篇文章主要介紹了vite+vue3項(xiàng)目解決低版本兼容性問題（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue項(xiàng)目打包:修改dist文件名方式
這篇文章主要介紹了vue項(xiàng)目打包:修改dist文件名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue源碼學(xué)習(xí)記錄之手寫vm.$mount方法
在我們開發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來構(gòu)造函數(shù)，通過new 得到子類的實(shí)例，然后通過$mount掛載到節(jié)點(diǎn)，今天通過本文給大家講解手寫vm.$mount方法，感興趣的朋友一起看看吧
2022-11-11