[已解决]求助求助大佬

Zichenya

用的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 的下拉菜单组件出现高度异常的问题。您可以使用浏览器的开发者工具检查元素样式并解决冲突。

希望这些解决方案能够帮助您解决高度异常的问题。

跳转到最佳答案楼层

不二猫猫

如果您使用 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 的下拉菜单组件出现高度异常的问题。您可以使用浏览器的开发者工具检查元素样式并解决冲突。

希望这些解决方案能够帮助您解决高度异常的问题。