el-popover、el-select组件,全屏下弹窗不显示

本文介绍了 Element UI 中 el-popover 和 el-select 组件的配置方法,特别是如何通过调整 append-to-body 和 popper-append-to-body 属性来实现全屏预览下正确显示弹窗及下拉菜单。

 1、el-popover、el-dialog组件适用:

<el-popover
  v-model="isVisible"
  width="400"
  trigger="manual"
  :disabled="!isPopShow"
  :placement="popOpen.position"
  popper-class="scroll_pop"
  @show="popShow"
  @hide="popHide"
  :append-to-body="inScreen"
>
 .....
</el-popover>

重点: :append-to-body="false",将这个属性设置成false,就能够在全屏下展示弹窗了

append-to-body: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false

2、el-select组件

<el-select
    class="jump_sel"
    v-model="linkOpen" 
    @change="linkChange" 
    style="width: 100%;"
    :popper-append-to-body="inScreen"
>
...

</el-select>

设置popper-append-to-body属性,在全局预览下,将其设置成false就可以展示了

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值