下拉菜单(Dropdowns)

下拉菜单是可切换的上下文覆盖，用于以下拉菜单格式显示链接和操作列表。

<b-dropdown>（或简称为 <b-dd>的别名）组件是可切换的上下文覆盖，用于显示链接列表等。它们是通过单击（或按空格键或在焦点对准时进入）而不是悬停来切换的；这是一个有意的设计决定。

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

按钮内容

您可以使用 text 属性（如前例所示）自定义下拉按钮的文本，也可以使用 button-content 插槽而不是 text 属性，button-content 槽允许您在按钮内容中使用基本的HTML和图标。

如果 text 属性和 button-content 插槽同时存在，则 button-content 插槽将优先

<div>
  <b-dropdown text="Button text via Prop">
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>

  <b-dropdown>
    <template v-slot:button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>
</div>

定位

下拉菜单支持各种位置，例如左右对齐，下拉菜单和下拉菜单，并在菜单从可见屏幕区域溢出时支持自动翻转（下拉菜单到下拉菜单，反之亦然）。

下拉菜单可以左对齐（默认），也可以相对于其上方的按钮右对齐。要使下拉列表在右侧对齐，请设置 right 属性。

<div>
  <b-dropdown id="dropdown-left" text="Left align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-right" right text="Right align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

上拉菜单

通过设置 dropup 属性，将您的 dropdown 菜单变成为 drop-up 菜单

<div>
  <b-dropdown id="dropdown-dropup" dropup text="Drop-Up" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

向左或向右

设置 dropright 属性将下拉菜单变成右下拉菜单。或者，通过将 dropleft 右道具设置为 true ，

dropright 优先于 dropleft。如果设置了 dropup ，则 dropright 或 dropleft 均无效。

<div>
  <b-dropdown id="dropdown-dropright" dropright text="Drop-Right" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-dropleft" dropleft text="Drop-Left" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

自动“翻转”

默认情况下，下拉菜单可能会根据其在视口中的当前位置翻转到顶部或底部。要禁用此自动翻转功能，请设置 no-flip 属性。

想将菜单从切换按钮稍微移开吗？然后使用 offset 属性指定从切换按钮向右（或在负数时向左）推像素的数量：

指定为多个像素：正向表示右移，负向表示左移。
指定以字符串形式传递的CSS单位（即 0.3rem，4px，1.2em，等等）的距离。

<div>
  <b-dropdown id="dropdown-offset" offset="25" text="Offset Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

边界约束

默认情况下，下拉列表在视觉上被限制为其滚动父级，这在大多数情况下都足够了。但是，如果将下拉菜单放在设置了 overflow: scroll（或类似）的元素中，下拉菜单在某些情况下可能会被截断。要解决此问题，可以通过边界支柱指定 boundary 属性。支持的值为 'scrollParent' （默认值），'viewport'，'window' 或对HTML元素的引用。边界值直接传递到 Popper.js 的 boundariesElement 配置选项。

注意： 当 boundary 不是默认的 'scrollParent' 值时，样式 position: static 将应用于下拉组件的根元素，以便允许菜单从其滚动容器中“跳出”。在某些情况下，这可能会影响下拉式触发器按钮的布局或位置。在这些情况下，您可能需要将下拉列表包装到另一个元素中。

分体式按钮支持

创建一个拆分下拉按钮，其中左侧按钮提供标准的 click 事件和链接支持，而右侧则是下拉菜单切换按钮。

<div>
  <b-dropdown split text="Split Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

分体式按钮链接支持

左拆分按钮默认为 <button>（确切地说是 <b-button> ）。要将此按钮转换为 link 或 <router-link>，请在保持按钮外观的同时，通过 split-href 属性指定或通过 split-to 属性 to （指定）一个路由器值。

<div>
  <b-dropdown split split-href="#foo/bar" text="Split Link" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

拆分按钮类型

拆分按钮默认为 'button' 按钮 type（类型）。您可以通过 split-button-type 道具指定其他类型。支持的值包括：'button'，'submit' 和 'reset'。

如果设置了 split-to 或 split-href 属性，则将忽略 split-button-type 属性。

样式选项

下拉菜单支持用于设置下拉触发按钮样式的各种道具。

尺寸

下拉菜单可使用各种尺寸的触发按钮，包括默认和拆分下拉按钮。

将 size 属性设置为 sm （较小按钮）或 lg （较大按钮）。

<div>
  <div>
    <b-dropdown size="lg" text="Large" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="lg" split text="Large Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
  <div>
    <b-dropdown size="sm" text="Small" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="sm" split text="Small Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
</div>

注意： 更改按钮的大小不会影响菜单项的大小！

下拉切换按钮可以通过将 variant 属性设置为 success，primary，info，danger，link，outline-dark，等等。（或自定义变量，如果已定义）来应用标准的 Bootstrap 上下文变量之一。默认变量是 secondary 变量。

有关内置上下文变量的完整列表，请参见 Variant Reference 。

<div>
  <b-dropdown text="Primary" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Success" variant="success" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Outline Danger" variant="outline-danger" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

您还可以通过 toggle-class 属性将任意类应用于切换按钮。该属性接受一个字符串或字符串数组。

拆分按钮颜色变量

默认情况下，left split button（左拆分按钮）使用与 toggle button（切换按钮）相同的 variant（变体）。您可以通过 split-variant 属性为 split button（拆分按钮）提供自己的变量。

<div>
  <b-dropdown
    split
    split-variant="outline-primary"
    variant="primary"
    text="Split Variant Dropdown"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

块级下拉菜单

默认情况下，下拉菜单的作用类似于按钮，并以嵌入式方式显示。要创建块级下拉菜单（跨到父级的整个宽度），请设置 block 属性。同时支持常规和拆分按钮下拉菜单。

<div>
  <b-dropdown text="Block Level Dropdown" block variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown
    text="Block Level Split Dropdown"
    block
    split
    split-variant="outline-primary"
    variant="primary"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

如果您也希望下拉菜单也跨过父容器的整个宽度，请将 w-100 实用程序类添加到 menu-class 属性中。

<div>
  <b-dropdown
    text="Block Level Dropdown Menu"
    block
    variant="primary"
    class="m-2"
    menu-class="w-100"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

许多受支持的下拉 sub-components（子组件）都提供了用于控制其文本颜色的 variant 属性。

隐藏的插入符

通过将 no-caret 属性设置为 true。可以在视觉上隐藏切换器的插入符号的情况下创建下拉列表。当下拉菜单显示为图标时，这很有用。

<div>
  <b-dropdown size="lg"  variant="link" toggle-class="text-decoration-none" no-caret>
    <template v-slot:button-content>
      &#x1f50d;<span class="sr-only">Search</span>
    </template>
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

注意： 使用 split mode（分割模式）时。插入符号将始终显示。

默认情况下，即使未显示菜单，<b-dropdown> 也会在 DOM 中呈现菜单内容。当在同一页面上呈现大量下拉菜单时，由于总体内存利用率较高，因此性能可能会受到影响。通过将 lazy 属性设置为 true ，可以指示 <b-dropdown> 仅在显示菜单内容时渲染菜单内容。

以下组件可以放置在下拉列表中。使用任何其他组件或标记可能会中断布局和/或键盘导航。

子组件	描述	别名
`<b-dropdown-item>`	提供 click，link，and `<router-link>`/`<nuxt-link>` 默认情况下渲染为 `<a>` 元素。	`<b-dd-item>`
`<b-dropdown-item-button>`	使用 `<button>` 元素渲染菜单项的 `<b-dropdown-item>` 的替代方法。	`<b-dropdown-item-btn>`, `<b-dd-item-button>`, `<b-dd-item-btn>`
`<b-dropdown-divider>`	可用于分离下拉项的分隔线/间隔线。	`<b-dd-divider>`
`<b-dropdown-text>`	菜单中自由流动的文本内容。	`<b-dd-text>`
`<b-dropdown-form>`	用于在下拉菜单中放置表单控件。	`<b-dd-form>`
`<b-dropdown-group>`	用于将下拉式子组件与可选标头分组。	`<b-dd-group>`
`<b-dropdown-header>`	标题项，用于帮助标识一组下拉项。	`<b-dd-header>`

注意： 不支持嵌套子菜单。

<b-dropdown-item> 通常用于在菜单内创建导航链接。使用 href 属性或 to 属性（用于路由器链接支持）来生成适当的导航链接。如果既不提供 href 也不提供 to ，则将使用 href 为 # 的标准<a> 链接生成（带有事件处理程序，该事件处理程序将通过阻止默认链接操作来防止滚动到顶部行为）。

通过设置 disabled 属性来禁用下拉菜单项。

历史上下拉菜单的内容必须是链接（<b-dropdown-item>），但是Bootstrap v4不再是这种情况。现在，您可以选择使用<b-dropdown-item-button> 子组件在下拉菜单中创建 <button> 元素。<b-dropdown-item-button>不支持 href 或 to 属性。

通过设置 disabled 属性来禁用下拉项按钮。

<div>
  <b-dropdown id="dropdown-buttons" text="Dropdown using buttons as menu items" class="m-2">
    <b-dropdown-item-button>I'm a button</b-dropdown-item-button>
    <b-dropdown-item-button active>I'm a active button</b-dropdown-item-button>
    <b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
    <b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
  </b-dropdown>
</div>

当菜单项不触发导航时，建议使用 <b-dropdown-item-button> 子组件。

用 <b-dropdown-divider> 分开相关菜单项组。

<div>
  <b-dropdown id="dropdown-divider" text="Dropdown with divider" class="m-2">
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second item</b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>Separated Item</b-dropdown-item-button>
  </b-dropdown>
</div>

使用 <b-dropdown-text> 子组件将任意格式的文本放在下拉菜单中，或者使用文本并使用间距实用程序。请注意，您可能需要其他大小调整样式来约束/设置菜单宽度。

<div>
  <b-dropdown id="dropdown-text" text="Dropdown with text" class="m-2">
    <b-dropdown-text style="width: 240px;">
      Some example text that's free-flowing within the dropdown menu.
    </b-dropdown-text>
    <b-dropdown-text>And this is more example text.</b-dropdown-text>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second Item</b-dropdown-item-button>
  </b-dropdown>
</div>

<b-dropdown-text> 已应用了BootstrapVue定制类 .b-dropdown-text ，该类设置了一些适用于大多数情况的基本样式。默认情况下，其宽度将与最宽的 <b-dropdown-item> 内容相同。您可能需要在组件上放置其他样式或帮助程序类。

默认情况下， <b-dropdown-text> 使用标记 <p> 进行渲染。您可以通过将 tag 属性设置为 <b-dropdown-text> 子组件上的任何有效 HTML5 标签来更改渲染的标签。

下拉菜单支持基本形式。将 <b-dropdown-form> 放在下拉菜单中，然后将表单控件放在 <b-dropdown-form> 中。<b-dropdown-form> 基于 <b-form> 组件，并支持与常规形式相同的道具和属性。

<template>
  <div>
    <b-dropdown id="dropdown-form" text="Dropdown with form" ref="dropdown" class="m-2">
      <b-dropdown-form>
        <b-form-group label="Email" label-for="dropdown-form-email" @submit.stop.prevent>
          <b-form-input
            id="dropdown-form-email"
            size="sm"
            placeholder="email@example.com"
          ></b-form-input>
        </b-form-group>

        <b-form-group label="Password" label-for="dropdown-form-password">
          <b-form-input
            id="dropdown-form-password"
            type="password"
            size="sm"
            placeholder="Password"
          ></b-form-input>
        </b-form-group>

        <b-form-checkbox class="mb-3">Remember me</b-form-checkbox>
        <b-button variant="primary" size="sm" @click="onClick">Sign In</b-button>
      </b-dropdown-form>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>New around here? Sign up</b-dropdown-item-button>
      <b-dropdown-item-button>Forgot Password?</b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<script>
  export default {
    methods: {
      onClick() {
        // Close the menu and (by passing true) return focus to the toggle button
        this.$refs.dropdown.hide(true)
      }
    }
  }
</script>

<b-dropdown-form> 已应用 BootstrapVue 定制类 .b-dropdown-form ，它设置了一些适用于大多数情况的基本样式。默认情况下，其宽度将与最宽的 <b-dropdown-item> 内容相同。您可能需要在组件上放置其他样式或帮助程序类。

将一组下拉子组件与一个可选的关联标头分组。在您的 <b-dropdown-group> 与 other groups（其他组）或 non-grouped（未分组）的下拉内容之间放置一个 <b-dropdown-divider>

<div>
  <b-dropdown id="dropdown-grouped" text="Dropdown with group" class="m-2">
    <b-dropdown-item-button>
      Non-grouped Item
    </b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-group id="dropdown-group-1" header="Group 1">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-group id="dropdown-group-2" header="Group 2">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>
      Another Non-grouped Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

建议使用 <b-dropdown-group> 代替 <b-dropdown-header> 为标题提供可访问的分组项目。

在任何下拉菜单中添加标题以标记操作部分。

<div>
  <b-dropdown id="dropdown-header" text="Dropdown with header" class="m-2">
    <b-dropdown-header id="dropdown-header-label">
      Dropdown header
    </b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      First item
    </b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      Second Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

有关使辅助技术用户更容易访问标题的详细信息，请参见 Dropdown headers and accessibility （下拉标题和可访问性）部分。

使用 <b-dropdown-group> 子组件可简化创建具有关联标头的可访问的分组下拉项的过程。

点击 <b-dropdown-form> 内的按钮将不会自动关闭菜单。如果需要使用按钮（或通过表单提交事件）关闭菜单，请在 <b-dropdown> 实例上调用 hide() 方法，如上例所示。

hide() 方法接受单个布尔参数。如果参数为 true ，则菜单关闭后，焦点将返回到下拉切换按钮。否则，一旦关闭菜单，文档将获得焦点。

要监听任何下拉窗口，请使用：

export default {
  mounted() {
    this.$root.$on('bv::dropdown::show', bvEvent => {
      console.log('Dropdown is about to be shown', bvEvent)
    })
  }
}

有关事件的完整列表，请参阅文档的 Events（事件）部分。

可选范围的默认插槽

默认插槽的范围可以选择为以下范围：

属性或方法	描述
`hide()`	可用于关闭下拉菜单。接受可选的布尔参数，如果为 `true` ，则将焦点返回到切换按钮

可访问性

提供一个唯一的 id 属性可通过在渲染的标记中自动添加适当的 aria-* 属性来确保ARIA的合规性。

默认的 ARIA 角色设置为 menu ，但是您可以根据您的用户情况，通过 role 属性将此默认角色更改为另一个角色（例如 navigation【导航】）。

当菜单项不触发导航时，建议使用 <b-dropdown-item-button> 子组件（不作为链接公布）而不是 <b-dropdown-item>（已提供）作为指向用户的链接）。

标题和可访问性

在下拉菜单中使用 <b-dropdown-header> 组件时，建议为每个标题添加一个 id 属性，然后在每个标题上设置 aria-describedby 性（设置为相关标题的 id 值）在该标题下的下拉菜单项之后。这将为辅助技术的用户（即视障用户）提供有关下拉项的其他上下文：

<div>
  <b-dropdown id="dropdown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
    <b-dropdown-header id="dropdown-header-1">Groups</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Delete</b-dropdown-item-button>

    <b-dropdown-header id="dropdown-header-2">Users</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Delete</b-dropdown-item-button>

    <b-dropdown-divider></b-dropdown-divider>

    <b-dropdown-item-button>
      Something <strong>not</strong> associated with Users
    </b-dropdown-item-button>

  </b-dropdown>
</div>

作为简化的替代方法，可以使用 <b-dropdown-group> 轻松地将标题文本与所包含的下拉子组件相关联。

下拉菜单支持键盘导航，可模拟本地 <select> 行为。

注意，DOWN 和 UP 不会将焦点移到 <b-dropdown-form> 子组件中，但是用户仍然可以使用 TAB 或 SHIFT+TAB 移入菜单内的表单控件。

实施说明

出于可访问性的原因，下拉菜单使用语义 <ul> 和 <li> 元素渲染。.dropdown-menu 菜单是 <ul> 元素，而下拉菜单项（items【项目】, buttons【按钮】, text【文本】, form【表单】, headers【标题】, 和 dividers【分隔符】）则包装在 <li> 素中。如果创建自定义项目以放置在下拉菜单中，请确保将它们包装为普通的 <li> 。

另请参阅

<b-nav-item-dropdown> 用于 <b-nav> 和 <n-navbar> 内部的下拉菜单支持
Router Link Support 参考，有关 <b-dropdown-item> 上特定于 router-link（路由链接）属性的信息

组件参考

查看源代码

<b-dropdown> 组件别名
<b-dropdown> 属性
<b-dropdown> 插槽
<b-dropdown> 事件

<b-dropdown> 也可以通过以下别名使用：

<b-dd>

注意：组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
`disabled`	Boolean	`false`	设置为 “true” 时，禁用组件的功能并将其置于禁用状态
`dropup`	Boolean	`false`	设置后，将菜单置于按钮顶部
`dropright`	Boolean	`false`	设置后，将菜单置于按钮右侧
`dropleft`	Boolean	`false`	设置后，将菜单置于按钮左侧
`right`	Boolean	`false`	将菜单的右边与按钮的右边对齐
`offset`	Number or String	`0`	指定要移动菜单的像素数。支持负值
`no-flip`	Boolean	`false`	防止菜单自动翻转位置
`popper-opts`	Any		传递给 Popper.js 的其他配置
`boundary`	String or HTMLElement	`'scrollParent'`	菜单的边界约束：'scrollParent'，'window'，'viewport'或对 HTMLElement 的引用
`text`	String		放置在切换按钮或拆分按钮中的文本为拆分模式
`html`	String		将 HTML字符串放置在切换按钮或拆分按钮中的是拆分模式。谨慎使用
`size`	String		设置组件外观的大小。 'sm'，'md'（默认）或'lg'
`variant`	String	`'secondary'`	将 Bootstrap 主题颜色变量之一应用于组件
`block` v2.1.0+	Boolean	`false`	渲染一个100％宽度的切换按钮（扩展到其父容器的宽度）
`menu-class`	String or Array or Object		CSS类（或多个类）添加到菜单容器
`toggle-tag`	String	`'button'`	指定要渲染的 HTML 标签，而不是默认标签。谨慎使用
`toggle-text`	String	`'Toggle Dropdown'`	在拆分模式下，要在切换上设置的 ARIA 标签（sr-only）
`toggle-class`	String or Array or Object		CSS类（或多个类）添加到切换按钮
`no-caret`	Boolean	`false`	隐藏切换按钮上的插入符号
`split`	Boolean	`false`	设置后，渲染拆分按钮下拉列表
`split-href`	String		表示拆分按钮的链接的目标 URL
`split-to`	String or Object		router-link 属性：表示拆分按钮的目标路由。单击时，to 属性的值将在内部传递到 router.push（），因此该值可以是字符串或位置描述符对象
`split-variant`	String		将 Bootstrap 主题颜色变量之一应用于拆分按钮。默认为 'variant' 属性值
`split-class` v2.2.0+	String or Array or Object		CSS类（或多个类）添加到拆分按钮
`split-button-type`	String	`'button'`	在拆分按钮的 “类型” 属性中放置的值：'button'【按钮】, 'submit'【提交】, 'reset'【重置】
`lazy`	Boolean	`false`	设置后，仅在打开菜单时将菜单内容安装到 DOM 中
`role`	String	`'menu'`	将 ARIA 属性“role”【角色】设置为特定值

<b-dropdown> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用Nuxt.js）。有关路由器链接（或nuxt链接）特定道具的更多详细信息，请参阅 Router support（路由支持）参考部分。

插槽名称	描述	范围
`button-content`	可用于实现带有图标和更多样式的自定义文本。
`default`	下拉菜单内容的可选范围可选的默认插槽

事件	参数	描述
`show`	`bvEvt` - BvEvent对象。调用 bvEvt.preventDefault（）取消显示。	在显示下拉菜单之前发出。可取消
`shown`		显示下拉列表时发出。
`hide`	`bvEvt` - BvEvent对象。调用 bvEvt.preventDefault（）取消隐藏。	在隐藏下拉列表之前发出。可取消。
`hidden`		隐藏下拉列表时发出。
`toggle`		单击切换按钮时发出。
`click`	`event` - Native click event object（本机单击事件对象）	在拆分模式下单击拆分按钮时发出。
`bv::dropdown::show`	`bvEvt` - BvEvent对象。调用 bvEvt.preventDefault（）取消显示。	在显示下拉列表之前在 $root 上发出。可取消。
`bv::dropdown::hide`	`bvEvt` - BvEvent对象。调用 bvEvt.preventDefault（）取消隐藏。	在隐藏下拉列表之前在 $root 上发出。可取消。

查看源代码

<b-dropdown-item> 组件别名
<b-dropdown-item> 属性
<b-dropdown-item> 事件

<b-dropdown-item> 也可以通过以下别名使用：

<b-dd-item>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性 (Click to sort Ascending)	类型	默认值	描述
`href`	String		表示标准 a 链接的链接目标 URL
`rel`	String		在渲染的链接上设置'rel'属性
`target`	String	`'_self'`	在渲染的链接上设置 'target' 属性
`active`	Boolean	`false`	设置为“ true”时，使用有效样式将组件置于活动状态
`disabled`	Boolean	`false`	设置为“ true”时，禁用组件的功能并将其置于禁用状态
`to`	String or Object		router-link属性：表示链接的目标路由。单击时，to 属性的值将在内部传递到 router.push（），因此该值可以是字符串或位置描述符对象
`append`	Boolean	`false`	router-link属性：设置附加属性总是将相对路径附加到当前路径
`replace`	Boolean	`false`	router-link属性：设置替换属性将在单击时调用“ router.replace（）”而不是“ router.push（）”，因此导航不会留下历史记录
`event`	String or Array	`'click'`	router-link属性：指定触发链接的事件。在大多数情况下，应将其保留为默认值
`active-class`	String		router-link属性：配置在链接处于活动状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”
`exact`	Boolean	`false`	router-link属性：默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配
`exact-active-class`	String		router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。通常，您将需要将此设置为类名称“active”
`router-tag`	String	`'a'`	router-link属性：指定要呈现的标签，它仍将监听单击事件以进行导航。“ router-tag”转换为最终渲染的路由器链接上的 tag 属性。通常，您应该使用默认值
`no-prefetch`	Boolean	`false`	nuxt-link属性：为了提高 Nuxt.js 应用程序的响应速度，当链接将显示在视口中时，Nuxt.js 将自动预取代码拆分页面。设置“不预取”将禁用特定链接的此功能
`variant`	String		将 Bootstrap 主题颜色变量之一应用于组件

<b-dropdown-item> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用Nuxt.js）。有关路由器链接（或nuxt链接）特定道具的更多详细信息，请参阅 Router support（路由支持）参考部分。

事件	参数	描述
`click`	Native click event object（本机点击事件对象）	单击项目时发出。

查看源代码

<b-dropdown-item-button> 组件别名
<b-dropdown-item-button> 属性
<b-dropdown-item-button> 事件

<b-dropdown-item-button> 也可以通过以下别名使用：

<b-dropdown-item-btn>
<b-dd-item-button>
<b-dd-item-btn>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`active`	Boolean	`false`	设置为“ true”时，使用有效样式将组件置于活动状态
`active-class`	String	`'active'`	router-link属性：配置在链接处于活动状态时应用的活动CSS类。通常，您将需要将此设置为类名称“active”
`disabled`	Boolean	`false`	设置为“ true”时，禁用组件的功能并将其置于禁用状态
`variant`	String		将 Bootstrap 主题颜色变量之一应用于组件

事件	参数	描述
`click`	Native click event object（本机点击事件对象）	单击按钮项时发出。

功能组件

查看源代码

<b-dropdown-divider> 组件别名
<b-dropdown-divider> 属性

<b-dropdown-divider> 也可以通过以下别名使用：

<b-dd-divider>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`tag`	String	`'hr'`	指定要渲染的HTML标签，而不是默认标签

功能组件

查看源代码

<b-dropdown-form> 组件别名
<b-dropdown-form> 属性

<b-dropdown-form> 也可以通过以下别名使用：

<b-dd-form>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
`inline`	Boolean	`false`	设置后，表单将处于内联模式，在单个水平行上显示标签，表单控件和按钮
`novalidate`	Boolean	`false`	设置后，将禁用表单中控件上的浏览器本机 HTML5 验证
`validated`	Boolean	`false`	设置后，在表单上添加 Bootstrap 类“已验证”，触发本机浏览器验证状态
`disabled`	Boolean	`false`	设置为“ true”时，禁用组件的功能并将其置于禁用状态
`form-class` v2.2.0+	String 或 Object 或 Array		CSS类（或多个类）添加到表单

功能组件

查看源代码

<b-dropdown-text> 组件别名
<b-dropdown-text> 属性

<b-dropdown-text> 也可以通过以下别名使用：

<b-dd-text>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`tag`	String	`'p'`	指定要渲染的 HTML 标签，而不是默认标签
`variant`	String		将 Bootstrap 主题颜色变量之一应用于组件

功能组件

查看源代码

<b-dropdown-group> 组件别名
<b-dropdown-group> 属性
<b-dropdown-group> 插槽

<b-dropdown-group> 也可以通过以下别名使用：

<b-dd-group>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
`header`	String		放置在标题中的文本内容
`header-tag`	String	`'header'`	指定要渲染的HTML标签，而不是标头的默认标签
`header-variant`	String		将 Bootstrap 主题颜色变量之一应用于标头
`header-classes`	String or Array or Object		CSS类（或多个类）添加到标题
`aria-describedby`	String		为该组件提供其他上下文的元素的 ID 。用作“aria- describeby”属性的值

插槽名称	描述
`header`	下拉组的可选标题内容。

功能组件

查看源代码

<b-dropdown-header> 组件别名
<b-dropdown-header> 属性

<b-dropdown-header> 也可以通过以下别名使用：

<b-dd-header>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础
`tag`	String	`'header'`	指定要渲染的HTML标签，而不是默认标签
`variant`	String		将 Bootstrap 主题颜色变量之一应用于组件

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件	命名输出	导入路径
`<b-dropdown>`	`BDropdown`	`bootstrap-vue`
`<b-dropdown-item>`	`BDropdownItem`	`bootstrap-vue`
`<b-dropdown-item-button>`	`BDropdownItemButton`	`bootstrap-vue`
`<b-dropdown-divider>`	`BDropdownDivider`	`bootstrap-vue`
`<b-dropdown-form>`	`BDropdownForm`	`bootstrap-vue`
`<b-dropdown-text>`	`BDropdownText`	`bootstrap-vue`
`<b-dropdown-group>`	`BDropdownGroup`	`bootstrap-vue`
`<b-dropdown-header>`	`BDropdownHeader`	`bootstrap-vue`

示例：

import { BDropdown } from 'bootstrap-vue'
Vue.component('b-dropdown', BDropdown)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名输出	导入路径
`DropdownPlugin`	`bootstrap-vue`

示例：

import { DropdownPlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)

下拉菜单(Dropdowns)

按钮内容

定位

菜单对齐

上拉菜单

向左或向右

自动“翻转”

菜单偏移

边界约束

分体式按钮支持

分体式按钮链接支持

拆分按钮类型

样式选项

尺寸

拆分按钮颜色变量

块级下拉菜单

隐藏的插入符

通过表单交互关闭菜单

可选范围的默认插槽

可访问性

标题和可访问性

键盘导航

实施说明

另请参阅

组件参考

导入单个组件

导入为Vue.js插件

下拉菜单(Dropdowns)

按钮内容

定位

菜单对齐

上拉菜单

向左或向右

自动“翻转”

菜单偏移

边界约束

分体式按钮支持

分体式按钮链接支持

拆分按钮类型

样式选项

尺寸

下拉颜色变量

拆分按钮颜色变量

块级下拉菜单

下拉子组件颜色变量

隐藏的插入符

慢速下拉菜单

下拉菜单支持的子组件

<b-dropdown-item>

<b-dropdown-item-button>

<b-dropdown-item-divider>

<b-dropdown-text>

<b-dropdown-form>

<b-dropdown-item-group>

<b-dropdown-item-header>

通过表单交互关闭菜单

通过 $root 事件监听下拉更改

可选范围的默认插槽

可访问性

标题和可访问性

键盘导航

实施说明

另请参阅

组件参考

组件别名

属性

插槽

事件

组件别名

属性

事件

组件别名

属性

事件

组件别名

属性

组件别名

属性

组件别名

属性

组件别名

属性

插槽

组件别名

属性

导入单个组件

导入为Vue.js插件

`<b-dropdown-item>`

`<b-dropdown-item-button>`

`<b-dropdown-item-divider>`

`<b-dropdown-text>`

`<b-dropdown-form>`

`<b-dropdown-item-group>`

`<b-dropdown-item-header>`