Skip to content

bugfix(select): select在dialog/sideSlider内,若content高度溢出,select下拉弹出层定位错误 #2727

Description

@JoJohw

Version / Branch / tag
2.1.0-beta.11

出了什么问题?(What Happened?)
dialog或sideSlider内若有select,当dialog/sideSlider Content高度溢出产生滚动,滚动时,select下拉弹出层定位像是fixed住了,下拉弹窗会跟着滚动条相对移动位置,并远离select输入框

Image Image

如何复现?(How to reproduce?)

Image
打开 dialog1

这是第 {{ i }} 行内容,用于撑高 dialog 使其产生滚动

<script setup> import { ref } from 'vue'; const isShow = ref(false); const options = ref([ { label: '选项一', value: 'option1' }, { label: '选项二', value: 'option2' }, { label: '选项三', value: 'option3' }, { label: '选项四', value: 'option4' }, { label: '选项五', value: 'option5' }, ]); const handleShow = () => { isShow.value = true; }; </script> <style scoped> .dialog-content { height: 100%; overflow-y: auto; padding: 16px; } .content-line { margin: 12px 0; color: #63656e; } .content-select { margin-top: 12px; } </style> Image
打开 sideslider

这是第 {{ i }} 行内容,用于撑高 sideslider 使其产生滚动

<script setup> import { ref } from 'vue'; const isShow = ref(false); const options = ref([ { label: '选项一', value: 'option1' }, { label: '选项二', value: 'option2' }, { label: '选项三', value: 'option3' }, { label: '选项四', value: 'option4' }, { label: '选项五', value: 'option5' }, ]); const handleShow = () => { isShow.value = true; }; </script> <style scoped> .sideslider-content { height: 100%; overflow-y: auto; padding: 16px; } .content-line { margin: 12px 0; color: #63656e; } .content-select { margin-top: 12px; } </style>

预期结果(What you expect?)
dialog或sideSlider内,若高度溢出产生滚动,select下拉框不应该随着滚动条滚动

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions