Zichenya 发表于 2023-2-16 22:26:30

求助求助大佬

用的Element plus的下拉菜单组件
但是浏览器里面出现高度异常的问题
有无大佬给个解决方法

不二猫猫 发表于 2023-3-25 16:26:12

如果您使用 Element Plus 的下拉菜单组件时遇到高度异常的问题,可能是由于以下原因之一:

您没有正确设置下拉菜单的高度。
Element Plus 的下拉菜单组件默认使用 auto 高度,这意味着它的高度将根据内容自适应。如果您想指定一个固定的高度,您可以使用 popper-options 属性来设置 popper 对象的选项,如下所示:

<el-dropdown>
<span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown" popper-options="{ boundariesElement: 'body', gpuAcceleration: false, offset: '0, 8px', placement: 'bottom-end', modifiers: { computeStyle: { gpuAcceleration: false } } }">
    <el-dropdown-item>选项一</el-dropdown-item>
    <el-dropdown-item>选项二</el-dropdown-item>
    <el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
在上面的例子中,我们使用 popper-options 属性来设置 popper 对象的选项,其中包括 placement、offset 和 modifiers 等选项。通过设置 placement 选项为 'bottom-end',我们可以将下拉菜单放置在触发器的底部右侧。通过设置 offset 选项为 '0, 8px',我们可以将下拉菜单向下偏移 8px。通过设置 modifiers 选项中的 computeStyle.gpuAcceleration 为 false,我们可以将 gpuAcceleration 禁用,以避免一些浏览器中的高度异常问题。

您的页面中可能存在 CSS 样式冲突或覆盖。
如果您的页面中存在 CSS 样式冲突或覆盖,可能会导致 Element Plus 的下拉菜单组件出现高度异常的问题。您可以使用浏览器的开发者工具检查元素样式并解决冲突。

希望这些解决方案能够帮助您解决高度异常的问题。
页: [1]
查看完整版本: 求助求助大佬