报告问题编辑此页面

折叠

轻松切换页面上几乎所有内容在垂直折叠容器中的可见性。包括对制作手风琴的支持。可见性可以通过我们的 v-b-toggle 指令 或通过 v-model 轻松切换。

<div>
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

<!-- b-collapse.vue -->

用法

其他元素可以使用 v-b-toggle 指令 轻松切换 <b-collapse> 组件。

<div>
  <!-- Using modifiers -->
  <b-button v-b-toggle.collapse-2 class="m-1">Toggle Collapse</b-button>

  <!-- Using value -->
  <b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>

  <!-- Element to collapse -->
  <b-collapse id="collapse-2">
    <b-card>I am collapsible content!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-usage.vue -->

有关详细用法信息，请参阅 v-b-toggle 指令文档。

初始可见性（开始展开）

若要使 <b-collapse> 最初显示，请设置 visible 属性

<div>
  <b-button v-b-toggle.collapse-3 class="m-1">Toggle Collapse</b-button>
  <b-collapse visible id="collapse-3">
    <b-card>I should start open!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-visible.vue -->

默认情况下，初始可见的折叠在挂载时不会有动画效果。若要启用折叠在挂载时展开的动画效果（当 visible 或 v-model 为 true 时），请在 <b-collapse> 上设置 appear 属性。

v-model 支持

组件的折叠（可见）状态也可以通过 v-model 设置，该模型在内部绑定到 visible 属性。

请注意，当使用 v-model 控制 <b-collapse> 时，aria-* 属性和类 collapsed 不会自动放置在触发按钮上（就像使用 v-b-toggle 指令的情况一样）。在此示例中，我们必须自己控制属性，以获得适当的可访问性支持。

<template>
  <div>
    <b-button
      :class="visible ? null : 'collapsed'"
      :aria-expanded="visible ? 'true' : 'false'"
      aria-controls="collapse-4"
      @click="visible = !visible"
    >
      Toggle Collapse
    </b-button>
    <b-collapse id="collapse-4" v-model="visible" class="mt-2">
      <b-card>I should start open!</b-card>
    </b-collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true
      }
    }
  }
</script>

<!-- b-collapse-v-model.vue -->

触发多个折叠元素

您甚至可以通过单个 v-b-toggle 折叠多个 <b-collapse> 组件，方法是使用修饰符提供多个目标 ID。

您还可以在 BootstrapVue 2.14.0+ 版本中通过指令值传递多个目标 ID。

<div>
  <!-- Via multiple directive modifiers -->
  <b-button v-b-toggle.collapse-a.collapse-b>Toggle Collapse A and B</b-button>

  <!-- Via space separated string of IDs passed to directive value -->
  <b-button v-b-toggle="'collapse-a collapse-b'">Toggle Collapse A and B</b-button>

  <!-- Via array of string IDs passed to directive value -->
  <b-button v-b-toggle="['collapse-a', 'collapse-b']">Toggle Collapse A and B</b-button>

  <!-- Elements to collapse -->
  <b-collapse id="collapse-a" class="mt-2">
    <b-card>I am collapsible content A!</b-card>
  </b-collapse>
  <b-collapse id="collapse-b" class="mt-2">
    <b-card>I am collapsible content B!</b-card>
  </b-collapse>
</div>

<!-- b-collapse-trigger-multiple.vue -->

手风琴支持

通过 accordion 属性提供手风琴组标识符，将一组 <b-collapse> 组件变成手风琴。请注意，手风琴组中一次只能打开一个折叠。

<template>
  <div class="accordion" role="tablist">
    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
      </b-card-header>
      <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
      </b-card-header>
      <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>

    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
      </b-card-header>
      <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: `
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
          richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
          brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
          tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
          assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
          wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
          vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
          synth nesciunt you probably haven't heard of them accusamus labore VHS.
        `
      }
    }
  }
</script>

<!-- b-accordion.vue -->

说明

  • 在使用手风琴模式时，请确保将触发元素和 <b-collapse> 组件放在具有 role="tablist" 的元素中，并在每个触发元素的容器（每个触发元素应包装）上设置 role="tab"，以便帮助屏幕阅读器用户导航手风琴组。
  • 如果在手风琴模式中使用 v-model 特性，请勿将手风琴组中所有折叠的 v-model 或 visible 属性绑定到同一个变量！
  • 确保手风琴组中最多只有一个 <b-collapse> 的 visible 属性和/或 v-model 设置为 true。手风琴组中一次只能打开一个折叠。

根据折叠状态在切换按钮中隐藏和显示内容

使用 v-b-toggle 指令时，当折叠关闭时，类 collapsed 将自动放置在触发器元素上，当折叠打开时，该类将被移除。您可以使用此类通过自定义 CSS 在切换中显示或隐藏内容。从 BootstrapVue 2.14.0 开始，当目标未关闭时，将应用类 not-collapsed。

示例 HTML 标记

<div>
  <b-button v-b-toggle:my-collapse>
    <span class="when-open">Close</span><span class="when-closed">Open</span> My Collapse
  </b-button>
  <b-collapse id="my-collapse">
    <!-- Content here -->
  </b-collapse>
</div>

示例自定义 CSS

.collapsed > .when-open,
.not-collapsed > .when-closed {
  display: none;
}

'全局' $root 实例事件

使用 $root 实例可以在组件外部的某个地方触发和监听事件，其中使用了 <b-collapse>。简而言之，$root 的行为类似于全局事件触发器和监听器。有关 $root 实例的详细信息，请参阅 官方 Vue 文档。

通过 $root 事件监听折叠状态更改

要监听任何折叠状态更改，请使用

export default {
  mounted() {
    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
      console.log('collapseId:', collapseId)
      console.log('isJustShown:', isJustShown)
    })
  }
}

其中 collapseId 是更改其状态的折叠 ID；isJustShown 为 true/false，即显示/隐藏折叠。

通过 $root 事件切换折叠

要切换（打开/关闭）特定折叠，请传递折叠 id

this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')

可选作用域默认插槽

v2.2.0 中的新增功能

默认插槽可以选择性地进行作用域限定。以下作用域属性可用

属性 类型 说明
visible 布尔值 折叠的可见状态
close 函数 调用时，将关闭折叠

辅助功能

v-b-toggle 指令将自动向指令出现的组件添加 ARIA 属性 aria-controls 和 aria-expanded（以及在未展开时添加类 collapsed）。 aria-expanded 将反映目标 <b-collapse> 组件的状态，而 aria-controls 将设置为目标 <b-collapse> 组件的 ID。

如果使用 v-model 设置可见状态，而不是指令 v-b-toggle，则需要在切换元素上自己添加 aria-controls 和其他适当的属性和类。

虽然 v-b-toggle 指令可以放置在几乎任何 HTML 元素或 Vue 组件上，但建议使用按钮或链接（或类似组件）作为切换器。否则，触发器元素可能对键盘或屏幕阅读器用户不可访问。如果您将它们放置在按钮或链接（或类似组件）之外，则应添加属性 tabindex="0" 和 role="button" 以允许辅助技术用户访问触发器元素。

使用手风琴模式时，请确保将触发器元素和 <b-collapse> 组件放置在具有 role="tablist" 的元素内，并在每个触发器元素的容器上设置 role="tab"，以便帮助屏幕阅读器用户浏览手风琴组。遗憾的是，BootstrapVue 无法自动为您应用这些角色，因为它取决于最终的文档标记。

注意：此组件的动画效果依赖于 prefers-reduced-motion 媒体查询。有关其他详细信息，请参阅 无障碍文档中的减少动画部分。

另请参阅

组件参考

<b-collapse>

查看源代码

属性

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

属性
类型
默认值
说明
accordion
字符串此折叠所属的手风琴组的名称
appear
v2.2.0+ 		布尔值false设置后，如果 prop 'visible' 在挂载时为 true，则会在初始挂载时执行动画
id
字符串用于设置呈现内容的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
is-nav
布尔值false设置后，表示折叠是导航栏的一部分，从而启用导航栏支持的某些功能
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签
visible
v-model 		布尔值false当为 'true' 时，展开折叠

v-model

属性
事件
visibleinput

插槽

名称
范围
说明
default v2.2.0+

事件

事件
参数
说明
bv::collapse::state
  1. id - 已更改状态折叠 ID
  2. state - `true` 或 `false`，即打开或关闭
当折叠已更改其状态时在 $root 上发出
hidden 当折叠已完成关闭时发出
hide 当折叠已开始关闭时发出
input
  1. visible - 如果折叠可见，则为 true
用于更新 v-model
show 当折叠已开始打开时发出
shown 当折叠已完成打开时发出

$root 事件侦听器

可以通过在 $root 上发出以下事件来控制 <b-collapse>

事件
参数
说明
bv::toggle::collapse

id - 要切换的折叠 ID

当此事件在 $root 上发出时，切换指定 ID 的折叠的可见状态

导入单个组件

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

组件
命名导出
导入路径
<b-collapse>BCollapsebootstrap-vue

示例

import { BCollapse } from 'bootstrap-vue'
Vue.component('b-collapse', BCollapse)

作为 Vue.js 插件导入

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

命名导出
导入路径
CollapsePluginbootstrap-vue

此插件还自动包含以下插件

  • VBTogglePlugin

示例

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