下拉菜单 | 组件 | BootstrapVue 中文

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

<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>

<!-- b-dropdown.vue -->

按钮内容

你可以使用 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 #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>

<!-- b-dropdown-button-content.vue -->

定位

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

下拉菜单可以左对齐（默认）或相对于其上方的按钮右对齐。要让下拉菜单右对齐，请设置 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>

<!-- b-dropdown-right.vue -->

上拉

通过设置 dropup 属性将你的下拉菜单变成上拉菜单。

<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>

<!-- b-dropdown-dropup.vue -->

向右或向左下拉

通过设置 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>

<!-- b-dropdown-dropright-dropleft.vue -->

自动“翻转”

默认情况下，下拉菜单可能会根据它们在视口中的当前位置翻转到顶部或底部。要禁用此自动翻转功能，请设置 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>

<!-- b-dropdown-offset.vue -->

边界约束

默认情况下，下拉菜单在视觉上受其滚动父级的约束，这在大多数情况下就足够了。但是，如果你将下拉菜单放置在设置了 overflow: scroll（或类似设置）的元素中，那么在某些情况下，下拉菜单可能会被切断。为了解决这个问题，你可以通过 boundary 属性指定一个边界元素。支持的值有 'scrollParent'（默认值）、'viewport'、'window' 或对 HTML 元素的引用。边界值直接传递给 Popper.js 的 boundariesElement 配置选项。

注意：当 boundary 为除默认值 'scrollParent' 之外的任何值时，样式 position: static 会应用到下拉菜单组件的根元素，以允许菜单“突破”其滚动容器。在某些情况下，这可能会影响下拉菜单触发按钮的布局或定位。在这些情况下，你可能需要将下拉菜单包装在另一个元素中。

高级 Popper.js 配置

如果你需要一些高级 Popper.js 配置来使下拉菜单符合你的需求，你可以使用 popper-opts 属性传递一个自定义配置对象，该对象将与 BootstrapVue 默认值深度合并。

前往 Popper.js 文档查看所有配置选项。

注意：当你覆盖 Popper.js 配置时，属性 offset、boundary 和 no-flip 可能会失去作用。

拆分按钮支持

创建一个拆分下拉按钮，其中左侧按钮提供标准 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>

<!-- b-dropdown-split.vue -->

拆分按钮链接支持

左侧拆分按钮默认为类型为 <button> 的元素（确切地说是一个 <b-button>）。要将此按钮转换为链接或 <router-link>，请通过 split-href 属性指定 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>

<!-- b-dropdown-split-link.vue -->

分割按钮类型

分割按钮默认为按钮 type 为 'button'。你可以通过 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>

<!-- b-dropdown-sizes.vue -->

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

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

请参阅变体参考，了解内置上下文变体的完整列表。

<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>

<!-- b-dropdown-variants.vue -->

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

分割按钮颜色变体

默认情况下，左侧分割按钮使用与 toggle 按钮相同的 variant。你可以通过 split-variant 属性为分割按钮提供自己的变体。

<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>

<!-- b-dropdown-split-variant.vue -->

块级下拉菜单

默认情况下，下拉菜单的行为类似于按钮，并以内联方式显示。若要创建块级下拉菜单（跨越父级的整个宽度），请设置 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>

<!-- b-dropdown-block.vue -->

如果您还希望下拉菜单跨越父容器的整个宽度，请将 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>

<!-- b-dropdown-block-menu.vue -->

许多受支持的下拉菜单子组件提供 variant 属性，用于控制其文本颜色。

隐藏插入符号

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

<div>
  <b-dropdown size="lg"  variant="link" toggle-class="text-decoration-none" no-caret>
    <template #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>

<!-- b-dropdown-hidden-caret.vue -->

注意：使用 split 模式时，始终会显示插入符号。

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

以下组件可以放置在您的下拉菜单中。使用任何其他组件或标记可能会破坏布局和/或键盘导航。

子组件	说明	别名
`<b-dropdown-item>`	提供单击、链接和 `<router-link>`/`<nuxt-link>` 功能的操作项。默认情况下呈现为 `<a>` 元素。	`<b-dd-item>`
`<b-dropdown-item-button>`	`<b-dropdown-item>` 的替代项，使用 `<button>` 元素呈现菜单项。	`<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，则会生成一个标准 <a> 链接，其 href 为 #（带有事件处理程序，该处理程序将通过阻止默认链接操作来防止滚动到顶部）。

通过设置 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.vue -->

当菜单项不会触发导航时，建议使用 <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-divider.vue -->

使用 <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.vue -->

<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 protected]"
          ></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.vue -->

<b-dropdown-form> 具有 BootstrapVue 自定义类 .b-dropdown-form，适用于大多数情况的基本样式。默认情况下，其宽度与最宽的 <b-dropdown-item> 内容相同。您可能需要在组件上放置额外的样式或帮助类。

使用可选关联标题对一组下拉子组件进行分组。在 <b-dropdown-group> 和其他组或非分组下拉内容之间放置 <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.vue -->

使用 <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>

<!-- b-dropdown-header.vue -->

有关为辅助技术用户提供更易访问的标题的详细信息，请参见部分下拉标题和可访问性。

使用 <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)
    })
  }
}

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

可选作用域的默认插槽

默认插槽可选地作用域化，其中提供以下作用域

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

可访问性

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

默认 ARIA 角色设置为 menu，但您可以通过 role 属性将此默认值更改为其他角色（例如 navigation），具体取决于您的用户案例。 role 属性值将用于确定切换按钮的 aria-haspopup 属性。

当菜单项不会触发导航时，建议使用 <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-aria.vue -->

作为一种简化的替代方案，请改用 <b-dropdown-group> 以轻松地将标题文本与包含的下拉子组件关联起来。

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

请注意，向下 和 向上 不会将焦点移到 <b-dropdown-form> 子组件中，但用户仍可以使用 Tab 或 Shift+Tab 在菜单中的表单控件中移动。

实施说明

出于可访问性原因，下拉菜单使用语义 <ul> 和 <li> 元素渲染。 .dropdown-menu 是 <ul> 元素，而下拉项（项、按钮、文本、表单、标题和分隔符）包装在 <li> 元素中。如果创建自定义项放置在下拉菜单中，请确保它们用一个简单的 <li> 包装。

另请参阅

<b-nav-item-dropdown> 适用于 <b-nav> 和 <n-navbar> 中的下拉支持
路由器链接支持参考，了解 <b-dropdown-item> 上可用的特定于路由器链接的属性

组件参考

查看源代码

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

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

<b-dd>

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

所有属性默认值都可全局配置。

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	说明
`块` v2.1.0+	`布尔值`	`false`	呈现一个 100% 宽度切换按钮（扩展到其父容器的宽度）
`边界`	`HTMLElement` 或 `String`	`'scrollParent'`	菜单的边界约束：'scrollParent'、'window'、'viewport' 或对 HTMLElement 的引用
`禁用`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`dropleft`	`布尔值`	`false`	设置时，将菜单定位到按钮的左侧
`dropright`	`布尔值`	`false`	设置时，将菜单定位到按钮的右侧
`dropup`	`布尔值`	`false`	设置时，将菜单定位到按钮的顶部
`html` 谨慎使用	`字符串`		要放置在切换按钮中的 HTML 字符串，或在拆分按钮处于拆分模式中时放置在其中
`id`	`字符串`		用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`lazy`	`布尔值`	`false`	设置时，仅在菜单打开时将菜单内容加载到 DOM 中
`menu-class`	`Array` 或 `Object` 或 `String`		要添加到菜单容器的 CSS 类（或类）
`no-caret`	`布尔值`	`false`	隐藏切换按钮上的插入符号指示符
`no-flip`	`布尔值`	`false`	防止菜单自动翻转位置
`offset`	`Number` 或 `String`	`0`	指定要移动菜单的像素数。支持负值
`popper-opts`	`对象`	`{}`	要传递给 Popper.js 的其他配置
`right`	`布尔值`	`false`	将菜单的右边缘与按钮的右边缘对齐
`role`	`字符串`	`'menu'`	将 ARIA 属性 `role` 设置为特定值
`size`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`split`	`布尔值`	`false`	设置时，呈现一个拆分按钮下拉菜单
`split-button-type`	`字符串`	`'button'`	要放置在拆分按钮的 'type' 属性中的值：'button'、'submit'、'reset'
`split-class` v2.2.0+	`Array` 或 `Object` 或 `String`		要添加到拆分按钮的 CSS 类（或类）
`split-href`	`字符串`		表示拆分按钮的链接的目标 URL
`split-to`	`对象`或`字符串`		<router-link> prop：表示拆分按钮的目标路由。单击时，to prop 的值将内部传递给 router.push()，因此该值可以是字符串或位置描述符对象
`split-variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于拆分按钮。默认为 'variant' prop 值
`text`	`字符串`		要放置在切换按钮中的文本，或在拆分按钮为拆分模式时
`toggle-attrs` v2.22.0+	`对象`	`{}`	要应用于切换按钮的其他属性
`toggle-class`	`Array` 或 `Object` 或 `String`		要添加到切换按钮的 CSS 类（或类）
`toggle-tag` 谨慎使用	`字符串`	`'button'`	指定要呈现的 HTML 标签，而不是默认标签
`toggle-text`	`字符串`	`'切换下拉'`	在拆分模式下设置在切换上的 ARIA 标签（仅限屏幕阅读器）
`variant`	`字符串`	`'secondary'`	将 Bootstrap 主题颜色变体之一应用于组件

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

注意：支持 HTML 字符串 (*-html) 的 Prop 在传递原始用户提供的值时容易受到跨站脚本 (XSS) 攻击。您必须首先正确清理用户输入！

名称	作用域	说明
`button-content`	否	可用于实现带有图标和更多样式的自定义文本
`default`		下拉菜单内容的可选作用域默认插槽

事件	参数	说明
`bv::dropdown::hide`	`bvEvent` - BvEvent 对象。调用 bvEvent.preventDefault() 以取消隐藏	在下拉菜单隐藏之前在 $root 上发出。可取消
`bv::dropdown::show`	`bvEvent` - BvEvent 对象。调用 bvEvent.preventDefault() 以取消显示	下拉菜单显示前在 $root 上发出。可取消
`click`	`event` - 原生点击事件对象	在拆分模式下单击拆分按钮时发出
`hidden`		下拉菜单隐藏时发出
`hide`	`bvEvent` - BvEvent 对象。调用 bvEvent.preventDefault() 以取消隐藏	下拉菜单隐藏前发出。可取消
`show`	`bvEvent` - BvEvent 对象。调用 bvEvent.preventDefault() 以取消显示	下拉菜单显示前发出。可取消
`shown`		下拉菜单显示时发出
`toggle`		单击切换按钮时发出

查看源代码

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

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

<b-dd-item>

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

所有属性默认值都可全局配置。

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	说明
`active`	`布尔值`	`false`	设置为 `true` 时，将组件置于活动状态并带有活动样式
`active-class`	`字符串`		<router-link> 属性：配置链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`append`	`布尔值`	`false`	<router-link> 属性：设置 append 属性始终将相对路径追加到当前路径
`禁用`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`exact`	`布尔值`	`false`	<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性将强制模式与路由完全匹配
`exact-active-class`	`字符串`		<router-link> 属性：配置链接在完全匹配时处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`exact-path`	`布尔值`	`false`	<router-link> 属性：允许仅使用 url 的路径部分进行匹配，有效地忽略查询和哈希部分
`exact-path-active-class`	`字符串`		<router-link> 属性：配置链接在完全路径匹配时处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`href`	`字符串`		<b-link> 属性：表示标准 a 链接的链接目标 URL
`link-class` v2.9.0+	`Array` 或 `Object` 或 `String`		应用于内部链接元素的类或类
`no-prefetch`	`布尔值`	`false`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接在视口中显示时，Nuxt.js 会自动预取代码拆分的页面。设置 `no-prefetch` 将禁用特定链接的此功能
`prefetch` v2.15.0+	`布尔值`	`null`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接在视口中显示时，Nuxt.js 会自动预取代码拆分的页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
`rel`	`字符串`	`null`	<b-link> 属性：设置呈现的链接上的 `rel` 属性
`replace`	`布尔值`	`false`	<router-link> 属性：设置 replace 属性将在点击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
`router-component-name` v2.15.0+	`字符串`		<b-link> 属性：BootstrapVue 会自动检测 `<router-link>` 和 `<nuxt-link>`。在您希望使用基于 `<router-link>` 的第三方链接组件的情况下，将此属性设置为组件名称。例如，如果您正在使用 Gridsome，则将其设置为 'g-link'（请注意，仅将 `<router-link>` 特定的属性传递给组件）
`target`	`字符串`	`'_self'`	<b-link> 属性：设置呈现的链接上的 `target` 属性
`to`	`对象`或`字符串`		<router-link> 属性：表示链接的目标路由。点击时，to 属性的值将在内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象
`variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于组件

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

名称	说明
`default`	要放置在下拉菜单项中的内容

事件	参数	说明
`click`	原生点击事件对象	在点击项目时触发

查看源代码

<b-dropdown-item-button> 组件别名
<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`	`布尔值`	`false`	设置为 `true` 时，将组件置于活动状态并带有活动样式
`active-class`	`字符串`	`'active'`	<router-link> 属性：配置链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`button-class` v2.9.0+	`Array` 或 `Object` 或 `String`		应用于内部按钮元素的类或类
`禁用`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于组件

名称	说明
`default`	放置在下拉项按钮中的内容

事件	参数	说明
`click`	原生点击事件对象	在点击按钮项时触发

功能组件

查看源代码

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

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

<b-dd-divider>

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

所有属性默认值都可全局配置。

属性	类型	默认值	说明
`tag`	`字符串`	`'hr'`	指定要呈现的 HTML 标签，而不是默认标签

功能组件

查看源代码

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

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

<b-dd-form>

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

所有属性默认值都可全局配置。

属性	类型	默认值	说明
`禁用`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`form-class` v2.2.0+	`Array` 或 `Object` 或 `String`		要添加到表单的 CSS 类（或类）
`id`	`字符串`		用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`inline`	`布尔值`	`false`	设置后，表单将处于内联模式，在单行中显示标签、表单控件和按钮
`novalidate`	`布尔值`	`false`	设置后，禁用表单中控件上的浏览器原生 HTML5 验证
`validated`	`布尔值`	`false`	设置后，在表单上添加 Bootstrap 类“was-validated”，触发原生浏览器验证状态

名称	说明
`default`	要放置在下拉表单中的内容

功能组件

查看源代码

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

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

<b-dd-text>

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

所有属性默认值都可全局配置。

属性	类型	默认值	说明
`tag`	`字符串`	`'p'`	指定要呈现的 HTML 标签，而不是默认标签
`text-class`	`Array` 或 `Object` 或 `String`		应用于内部元素的类或类
`variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于组件

名称	说明
`default`	要放置在下拉文本中的内容

功能组件

查看源代码

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

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

<b-dd-group>

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

所有属性默认值都可全局配置。

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

名称	说明
`default`	要放置在下拉组中的内容（项目）
`header`	下拉组的可选标题内容

功能组件

查看源代码

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

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

<b-dd-header>

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

所有属性默认值都可全局配置。

属性	类型	默认值	说明
`id`	`字符串`		用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`tag`	`字符串`	`'header'`	指定要呈现的 HTML 标签，而不是默认标签
`variant`	`字符串`		将 Bootstrap 主题颜色变体之一应用于组件

名称	说明
`default`	要放置在下拉菜单标题中的内容

导入单个组件

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

组件	命名导出	导入路径
`<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)

按钮内容

定位

菜单对齐

上拉

向右或向左下拉

自动“翻转”

菜单偏移

边界约束

高级 Popper.js 配置

拆分按钮支持

拆分按钮链接支持

分割按钮类型

样式选项

尺寸

分割按钮颜色变体

块级下拉菜单

隐藏插入符号

通过表单交互关闭菜单

可选作用域的默认插槽

可访问性

标题和辅助功能

键盘导航

实施说明

另请参阅

组件参考

导入单个组件

作为 Vue.js 插件导入

按钮内容

定位

菜单对齐

上拉

向右或向左下拉

自动“翻转”

菜单偏移

边界约束

高级 Popper.js 配置

拆分按钮支持

拆分按钮链接支持

分割按钮类型

样式选项

尺寸

下拉菜单颜色变体

分割按钮颜色变体

块级下拉菜单

下拉菜单子组件颜色变体

隐藏插入符号

延迟加载下拉菜单

下拉菜单支持的子组件

<b-dropdown-item>

<b-dropdown-item-button>

<b-dropdown-divider>

<b-dropdown-text>

<b-dropdown-form>

<b-dropdown-group>

<b-dropdown-header>

通过表单交互关闭菜单

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

可选作用域的默认插槽

可访问性

标题和辅助功能

键盘导航

实施说明

另请参阅

组件参考

组件别名

属性

插槽

事件

组件别名

属性

插槽

事件

组件别名

属性

插槽

事件

组件别名

属性

组件别名

属性

插槽

组件别名

属性

插槽

组件别名

属性

插槽

组件别名

属性

插槽

导入单个组件

作为 Vue.js 插件导入

`<b-dropdown-item>`

`<b-dropdown-item-button>`

`<b-dropdown-divider>`

`<b-dropdown-text>`

`<b-dropdown-form>`

`<b-dropdown-group>`

`<b-dropdown-header>`