el-popover如何通過js手動控制彈出框顯示、隱藏
說明
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)文章
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue-simple-verify實(shí)現(xiàn)滑動驗(yàn)證碼功能
登錄頁面經(jīng)常會需要滑動驗(yàn)證碼的情況,使用vue插件vue-simple-verify就可以輕松實(shí)現(xiàn),下面小編給大家分享vue-simple-verify實(shí)現(xiàn)滑動驗(yàn)證碼功能,感興趣的朋友一起看看吧2024-06-06
vue使用html2PDF實(shí)現(xiàn)將內(nèi)容導(dǎo)出為PDF
將 HTML 轉(zhuǎn)換為 PDF 進(jìn)行下載是一個比較常見的功能,這篇文章將通過html2PDF實(shí)現(xiàn)將頁面內(nèi)容導(dǎo)出為PDF,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動效果
這篇文章主要為大家詳細(xì)介紹了vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue.js獲取被選擇的option的value和text值方法
今天小編就為大家分享一篇Vue.js獲取被選擇的option的value和text值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Vue實(shí)現(xiàn)自帶的過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個或多個值問題
這篇文章主要介紹了el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個或多個值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁中滑動圖片驗(yàn)證一直是各大網(wǎng)站、移動端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04