切换

v-b-toggle 是一款轻量级指令，用于切换折叠和侧边栏的可见性，并包括自动化的 WAI-ARIA 可访问性属性处理。

概述

可以在交互元素（例如按钮）上使用 v-b-toggle 指令，以切换 <b-collapse> 和 <b-sidebar> 组件的可见性状态。

除了切换目标组件的可见性之外，该指令还会自动更新应用它的元素上的 ARIA 可访问性属性，以便它们反映目标组件的可见性状态。有关其他详细信息和注意事项，请参阅下面的辅助功能部分。

指令语法和用法

该指令应用于触发目标可见性的元素或组件。目标组件可以通过指令修饰符、指令参数或作为指令值传递的字符串/数组指定（通过其 ID）。

v-b-toggle.my-collapse - 指令修饰符（允许多个目标，每个修饰符都是一个目标 ID）
v-b-toggle:my-collapse - 指令参数（支持 Vue 动态参数）v2.14.0+
v-b-toggle="'my-collapse'" - 指令值作为字符串 ID
v-b-toggle="'my-collapse1 my-collapse2'" - 指令值作为空格分隔的字符串 IDv2.14.0+
v-b-toggle="['my-collapse1', 'my-collapse2']" - 指令值作为字符串 ID 数组v2.14.0+

在同时针对多个组件时，可以使用修饰符、参数和值。

示例用法

<template>
  <div>
    <div class="mb-3">
      <b-button v-b-toggle.my-collapse>Toggle Collapse</b-button>
      <b-button v-b-toggle.my-sidebar>Toggle Sidebar</b-button>
    </div>

    <b-collapse id="my-collapse">
      <b-card title="Collapsible card">
        Hello world!
      </b-card>
    </b-collapse>

    <b-sidebar id="my-sidebar" title="Sidebar" shadow>
      <div class="px-3 py-2">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
    </b-sidebar>
  </div>
</template>

<!-- v-b-toggle-directive.vue -->

在链接上使用

2.15.0+

如果将指令放在链接（或呈现链接的组件）上，则还可以通过 href 属性指定目标 ID。

请注意，浏览器 URL 将发生更改，页面可能会滚动目标使其可见。若要防止 URL 更改和页面滚动，请将 @click.prevent 添加到链接。

示例用法

<template>
  <div>
    <div class="mb-3">
      <a v-b-toggle href="#example-collapse" @click.prevent>Toggle Collapse</a>
      <b-button v-b-toggle href="#example-sidebar" @click.prevent>Toggle Sidebar</b-button>
    </div>

    <b-collapse id="example-collapse">
      <b-card title="Collapsible card">
        Hello world!
      </b-card>
    </b-collapse>

    <b-sidebar id="example-sidebar" title="Sidebar" shadow>
      <div class="px-3 py-2">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
    </b-sidebar>
  </div>
</template>

<!-- v-b-toggle-links.vue -->

在切换触发器元素中隐藏和显示内容

使用 v-b-toggle 指令时，当目标组件关闭时，类 collapsed 将自动放置在触发器元素上，当打开时则移除。从 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;
}

防止目标打开或关闭

若要防止触发器元素切换目标，请在 <button>、<b-button> 或 <b-link>（或基于 <b-link> 的组件）上设置 disabled 属性，切换事件将不会分派到目标。

辅助功能

出于辅助功能原因，该指令应放置在可点击交互元素上，例如 <button> 或 <b-button>，键盘用户和屏幕阅读器用户可以轻松访问这些元素。本机无辅助功能角色 button（或 link）的元素将应用属性 role="button" 和 tabindex="0"，并将实例化相应的点击处理程序。因此，强烈建议不要将指令放置在按钮以外的表单控件上。

该指令应用并动态更新触发器元素上的以下 ARIA 属性

aria-controls - 正在切换的折叠或侧边栏组件的 ID
aria-expanded - 折叠或侧边栏的可见性状态（请参见下方的注意事项部分）

具有多个目标的注意事项

如果各个目标组件可以通过 v-model、其他带有 v-b-toggle 指令的控件或 CSS 可见性独立控制其折叠状态，则在指定多个目标时，aria-expanded 属性的值可能不正确。

另请参阅

<b-collapse> 带手风琴支持的可折叠内容
<b-sidebar> 离画布侧边栏
<b-navbar-toggle> 导航栏汉堡包切换按钮（基于 v-b-toggle 指令）

指令参考

导入各个指令

可以通过以下命名导出将各个指令导入到项目中

指令	命名导出	导入路径
`v-b-toggle`	`VBToggle`	`bootstrap-vue`

示例

import { VBToggle } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-toggle', VBToggle)

作为 Vue.js 插件导入

此插件包含上述所有列出的各个指令。

命名导出	导入路径
`VBTogglePlugin`	`bootstrap-vue`

示例

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