ElementUI下的Dropdown下拉框如何水平居中？

前端

2023-01-02 11:52:33

ElementUI 中水平居中 Dropdown 下拉框的技巧

Dropdown 组件介绍

ElementUI 的 Dropdown 组件是一个功能强大的工具，可用于创建下拉菜单。它是 Vue.js 生态系统中最受欢迎的 UI 框架之一，因其易用性和广泛的自定义选项而广受赞誉。

水平居中需求

在使用 Dropdown 组件时，有时我们需要使其水平居中以满足设计要求。要实现这一目标，可以使用 ElementUI 提供的内置属性或自定义 CSS 规则。

内置属性方法

ElementUI 的 Dropdown 组件提供了一个 placement 属性，可用于指定下拉菜单的位置。默认情况下，下拉菜单会显示在触发按钮的下方。若要水平居中下拉菜单，我们可以将 placement 设置为 "bottom"。

<el-dropdown placement="bottom">
  <span>点我</span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>选项一</el-dropdown-item>
    <el-dropdown-item>选项二</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

但是，此时下拉菜单还没有水平居中。为了达到这一点，还需要设置 left 属性，该属性可用于指定下拉菜单的左边距。我们可以根据需要调整 left 的值，直到下拉菜单水平居中。

<el-dropdown placement="bottom" left="50%">
  <span>点我</span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>选项一</el-dropdown-item>
    <el-dropdown-item>选项二</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

自定义 CSS 方法

除了使用内置属性外，还可以使用自定义 CSS 规则来水平居中 Dropdown 下拉菜单。首先，需要在样式表中定义一个新的类，如下所示：

.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

然后，将这个类应用到 Dropdown 组件上，如下所示：

<div class="dropdown-wrapper">
  <el-dropdown>
    <span>点我</span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项一</el-dropdown-item>
      <el-dropdown-item>选项二</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>