el-popover嵌套select彈窗點擊實現(xiàn)自定義關(guān)閉功能
需求
el-popover彈窗內(nèi)嵌套下拉選擇框，點擊el-popover彈出外部區(qū)域需關(guān)閉彈窗，點擊查詢、重置需關(guān)閉彈窗，
實現(xiàn)
根據(jù)需求要自定義彈窗的關(guān)閉和顯示，首先想到的是visible屬性，在實現(xiàn)過程中經(jīng)過反復(fù)的測驗，使用visible屬性點擊彈窗外部區(qū)域無法關(guān)閉彈窗。
轉(zhuǎn)換思路使用el-popover的hide事件來實現(xiàn)自定義關(guān)閉，可滿足上述需求
<el-popover ref="popoverRef" :offset="20" placement="bottom" trigger="click" > </el-popover>
const popoverRef= ref();
//關(guān)閉彈窗
const closePopover = function () {
popoverRef.value.hide();
};問題描述：在 el-popover 彈出框組件中嵌入 el-select 選擇器組件后，點擊 el-select 選擇器選中選項后，不僅 el-select 選擇器的選項彈框關(guān)閉了，外層 el-popover 組件的彈框也一并關(guān)閉了。
原因：el-popover 彈出框組件的關(guān)閉邏輯是當(dāng)點擊 popover 彈框以外的元素時，彈框就會關(guān)閉。然而 el-select 的 options 彈框默認(rèn)是針對頁面元素進行渲染的，而不是針對父元素渲染。也就是說， el-select 的 options 彈框不在 el-popover 彈出框上，點擊options 彈框后會觸發(fā) popover 彈窗框的關(guān)閉條件，因此就會造成選擇 el-select 選擇器的選項后，外層的 el-popover 彈出框也會關(guān)閉。
解決方式：Select 選擇器有一個屬性 teleported，該屬性可以控制 options 彈框的渲染位置。
<el-popover
ref="popoverRef"
:offset="20"
placement="bottom"
trigger="click"
>
<el-select v-model="value" placeholder="Select" :teleported="false" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-popover>const value = ref('')
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
]到此這篇關(guān)于el-popover嵌套select彈窗點擊實現(xiàn)自定義關(guān)閉的文章就介紹到這了,更多相關(guān)el-popover嵌套select彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)索引圖片切換效果的代碼，特別炫酷的效果，推薦給大家，感興趣的小伙伴們可以參考一下2015-11-11
ES6(ECMAScript 6)新特性之模板字符串用法分析
這篇文章主要介紹了ES6(ECMAScript 6)新特性之模板字符串用法,簡單介紹了ES6模板字符串的概念、功能并結(jié)合實例形式分析了ES6模板字符串的用法,需要的朋友可以參考下2017-04-04
在前不久做的一個web項目中，需要實現(xiàn)js表格排序的效果，當(dāng)時為了省事，就在網(wǎng)上找了幾個相關(guān)的js插件2011-10-10
對于JQuery，想必大家都很熟悉。目前，很多web項目，在實施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進行網(wǎng)頁效果開發(fā)。這篇文章將給大家深入介紹jQuery()方法的構(gòu)建原理，有需要的朋友們可以參考借鑒。2016-12-12
這篇文章主要介紹了JS實現(xiàn)加載時鎖定HTML頁面元素的方法,涉及javascript針對頁面元素的遍歷與屬性操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了帶左右箭頭圖片輪播的JS代碼，有需要的朋友可以參考一下2013-12-12
文章介紹了JavaScript中map()方法的基本語法、核心特點及與forEach()的區(qū)別,強調(diào)map返回新數(shù)組用于數(shù)據(jù)轉(zhuǎn)換,而forEach無返回值適合副作用操作,同時說明可通過循環(huán)實現(xiàn)類似功能,感興趣的朋友跟隨小編一起看看吧2025-09-09
因為最近要控制廣告，所以從綠盟與腳本之家頁面上，整理了一些cookies的操作控制代碼，喜歡的朋友不容錯過。2010-04-04
詳解CocosCreator優(yōu)化之DrawCall
這篇文章主要介紹了CocosCreator中DrawCall的優(yōu)化，想研究游戲性能的同學(xué)，一定要看一看2021-04-04
使用postMesssage()實現(xiàn)iframe跨域頁面間的信息傳遞
這篇文章主要介紹了使用postMesssage()實現(xiàn)iframe跨域頁面間的信息傳遞 的相關(guān)資料,需要的朋友可以參考下2016-03-03