vue3里面使用screenfull 不管是element-plus还是antd,select的下拉框不展示,原生的就展示,样式调了半天也没用?

2023-06-30 526 0

这个是原生
image.png
这个是element-plus
image.png

              <el-select v-model="state.rudder" filterable  :popper-append-to-body="inScreen"
                    :key="Math.random()">
                    <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

别就给一个 el-select 的部分呀,把 el-dialog 的部分代码也要贴上来哇……


猜测是因为现在的浏览器的 <x-select> 组件是 div + position:absolute 模拟的,而不是用的原生 <select> + <option> 的方式让浏览器来定位的。
所以其实应该是打开了,但是因为使用了 screenfull 导致定位错位了,或者直接定位失败了。

但是我自己的项目里面在 el-dialog 上面使用 screenfull,在弹窗内部使用 el-select 并不会出现定位错误的情况,所以还是得提供更多的代码信息才行。
可能是因为你在 el-select 上面使用了 popper-append-to-body 属性导致的?可以考虑先去掉看看。另外我看 Ele+ 的文档,popper-append-to-body 属性已经弃用了,可能改用 teleported 属性会解决问题。

element-plus的select 下拉选项默认是插入到body标签里面的, 与#app是同级, screenfull可能是影响到了:
image.png

使用这个属性再试试
image.png

而原生的select 下拉选项就在使用位置

element-plus与antd的select并不是原生的select的样式覆盖写的

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?