快捷導(dǎo)航

el-popover嵌套select彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉功能

更新時(shí)間：2024年07月23日 11:16:29 作者：徐_三歲

el-popover彈窗內(nèi)嵌套下拉選擇框,點(diǎn)擊el-popover彈出外部區(qū)域需關(guān)閉彈窗,點(diǎn)擊查詢、重置需關(guān)閉彈窗,遇到這樣的需求怎么解決呢,下面小編給大家介紹el-popover嵌套select彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉功能,感興趣的朋友一起看看吧

需求

el-popover彈窗內(nèi)嵌套下拉選擇框，點(diǎn)擊el-popover彈出外部區(qū)域需關(guān)閉彈窗，點(diǎn)擊查詢、重置需關(guān)閉彈窗，

實(shí)現(xiàn)

根據(jù)需求要自定義彈窗的關(guān)閉和顯示，首先想到的是visible屬性，在實(shí)現(xiàn)過程中經(jīng)過反復(fù)的測驗(yàn)，使用visible屬性點(diǎn)擊彈窗外部區(qū)域無法關(guān)閉彈窗。
轉(zhuǎn)換思路使用el-popover的hide事件來實(shí)現(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 選擇器組件后，點(diǎn)擊 el-select 選擇器選中選項(xiàng)后，不僅 el-select 選擇器的選項(xiàng)彈框關(guān)閉了，外層 el-popover 組件的彈框也一并關(guān)閉了。
原因：el-popover 彈出框組件的關(guān)閉邏輯是當(dāng)點(diǎn)擊 popover 彈框以外的元素時(shí)，彈框就會關(guān)閉。然而 el-select 的 options 彈框默認(rèn)是針對頁面元素進(jìn)行渲染的，而不是針對父元素渲染。也就是說， el-select 的 options 彈框不在 el-popover 彈出框上，點(diǎn)擊options 彈框后會觸發(fā) popover 彈窗框的關(guān)閉條件，因此就會造成選擇 el-select 選擇器的選項(xiàng)后，外層的 el-popover 彈出框也會關(guān)閉。

解決方式：Select 選擇器有一個(gè)屬性 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彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉的文章就介紹到這了,更多相關(guān)el-popover嵌套select彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: