弹出框

使用 Bootstrap v4 CSS 进行样式和动画，在网站上的任何元素中添加 BootstrapVue 弹出框的文档和示例。弹出框可以通过悬停、聚焦或单击元素来触发，并且可以包含内容和标题标题。弹出框是类固醇的工具提示。

概述

在希望出现弹出框的任何元素或组件上使用 v-b-popover 指令。

<div class="text-center my-3">
  <b-button v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-button>
</div>

<!-- b-popover.vue -->

使用 popover 指令时需要了解的事项

Popovers 依赖第三方库 Popper.js 进行定位。
Popovers 需要 BootstrapVue 的自定义 SCSS/CSS 才能正常运行，并支持变体。
如果未提供标题和内容（或为空字符串），则 popover 不会显示。
指定容器：'body'（默认）以避免在更复杂的组件（如输入组、按钮组等）中出现渲染问题。
在隐藏元素上触发 popover 将不起作用。
针对 disabled 元素的 popover 必须在包装元素上触发。
当从跨多行的超链接触发时，popover 将居中。在 <a>、<b-link> 或 <router-link> 上使用 white-space: nowrap; 以避免此行为。
触发 popover 的元素应位于文档选项卡序列中。如果需要，请添加 tabindex="0"。

定位

有十二个定位选项可用：top、topleft、topright、right、righttop、rightbottom、bottom、bottomleft、bottomright、left、lefttop 和 leftbottom 对齐。定位相对于触发元素。

实际示例

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.top="'Popover!'" variant="primary">Top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.right="'Popover!'" variant="primary">Right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.left="'Popover!'" variant="primary">Left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottom="'Popover!'" variant="primary">Bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.topright="'Popover!'" variant="primary">Top right</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.topleft="'Popover!'" variant="primary">Top left</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottomright="'Popover!'" variant="primary">Bottom right</b-button>
      </b-col>
       <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottomleft="'Popover!'" variant="primary">Bottom left</b-button>
      </b-col>
     <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.lefttop="'Popover!'" variant="primary">Left top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.leftbottom="'Popover!'" variant="primary">Left bottom</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.righttop="'Popover!'" variant="primary">right top</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.rightbottom="'Popover!'" variant="primary">right bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-positioning.vue -->

触发器

Popovers 可以通过 click、hover 和 focus 的任意组合触发（打开/关闭）。默认触发器是 click。或者可以指定 manual 触发器，其中 popover 只能通过编程方式打开或关闭。

如果一个弹出窗口有多个触发器，那么在弹出窗口关闭之前，所有触发器都必须清除。即，如果一个弹出窗口具有触发器 focus click，并且它是由 focus 打开的，然后用户单击触发器元素，他们必须再次单击它并且移动焦点以关闭弹出窗口。

<div>
  <b-container fluid>
    <h5>Triggers</h5>
    <b-row class="text-center">
      <b-col md="6" class="py-3">
        <b-button v-b-popover="'Popover!'" variant="outline-success">Click (default)</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover="'Popover!'" variant="outline-success">Hover</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.focus="'Popover!'" variant="outline-success">Focus</b-button>
      </b-col>
      <b-col md="6" class="py-3">
        <b-button v-b-popover.hover.focus="'Popover!'" variant="outline-success">Hover + Focus</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-triggers.vue -->

使弹出窗口适用于键盘和辅助技术用户

您应该只将弹出窗口添加到传统上可通过键盘聚焦且具有交互性的 HTML 元素（例如链接、按钮或表单控件）。尽管可以通过添加 tabindex="0" 属性使任意 HTML 元素（例如 <span>）可聚焦，但这会为键盘用户在非交互式元素上添加潜在的烦人且令人困惑的制表符停止。此外，大多数辅助技术目前不会在此情况下宣布弹出窗口。

此外，不要仅仅依赖 hover 作为弹出窗口的触发器，因为这会让您的弹出窗口对于仅限键盘的用户而言无法触发。

在 `<button>` 元素上使用 `focus` 触发器的注意事项

为了在仅使用 focus 触发器时实现适当的跨浏览器和跨平台行为，您必须使用呈现 <a> 标记的元素，而不是 <button> 标记，并且您还必须包含 tabindex="0" 属性。

以下内容将生成一个看起来像按钮的 <a>

<b-button
  href="#"
  tabindex="0"
  v-b-popover.focus="'Popover content'"
  title="Popover title"
>
  Link button with popover directive
</b-button>

下次单击时关闭（自动关闭）

单独使用 focus 触发器在用户下次单击时关闭弹出窗口。 focus 还使弹出窗口在 focus 和 click 上都激活（因为单击会使元素接收焦点，假设它在页面的制表符序列中）。

但是，您可以将触发器指定为 click blur，这将仅使单击激活弹出窗口，并且单击元素 - 或失去焦点到另一个元素或文档的一部分 - 将关闭弹出窗口。

此 blur 触发器必须与 click 触发器结合使用。

以下示例显示了 click blur 的用例。弹出窗口仅在单击按钮时打开，并且将在单击按钮或在其他任何地方单击（或通过按下 Tab 键更改焦点）时关闭。有些人称这种行为为自动关闭。

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.click.blur="'Content'" title="Popover" variant="primary">Click</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-dismiss-next-click.vue -->

标题和内容

有几种选择可以设置弹出框的标题和内容。

默认情况下，弹出框将使用元素的 title 属性作为弹出框标题，并且内容作为字符串传递给 v-b-popover 指令。标题和内容也可以作为对象传递给 v-b-popover，形式为

const options = {
  title: 'This is the title',
  content: 'This is the content'
}

如果你的内容有基本的 HTML 标记，那么你还需要将 html 属性设置为 true，或者使用指令修饰符 html

// Object format with HTML:
const options = {
  title: 'This is the <strong>title</strong>',
  content: 'This is the <em>content<em>',
  html: true
}

标题和内容还可以是函数引用，每次打开弹出框时都会调用这些函数引用。若要在打开时使函数返回的值保持响应，请在内容更改时将标题或内容设置为新的函数引用。

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="'Content!'" title="Title from title attribute" variant="success">
          Title + Content
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button
          v-b-popover.hover="{title:'Popover', content:'This is the content of popover'}"
          variant="success"
        >
          Config Object
        </b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover="popoverData" variant="success">Config from data</b-button>
      </b-col>
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.html="popoverMethod" title="Popover with HTML" variant="success">
          Method
        </b-button>
      </b-col>
    </b-row>
    <b-row class="text-center">
      <b-col cols="12" class="py-3">
        <b-button v-b-popover.hover="popoverConfig" variant="success">Config Object</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date(),
        counter: 0,
        timer: null
      }
    },
    computed: {
      popoverConfig() {
        // Both title and content specified as a function in this example
        // and will be called the each time the popover is opened
        return {
          html: true,
          title: () => {
            // Note this is called only when the popover is opened
            return 'Hello <b>Popover:</b> ' + ++this.counter
          },
          content: () => {
            // Note this is called only when the popover is opened
            return 'The date is:<br><em>' + new Date() + '</em>'
          }
        }
      },
      popoverData() {
        return {
          title: 'Popover Title',
          content: 'The date is ' + this.date
        }
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      popoverMethod() {
        // Returns the content as a string
        // Will be called each time the popover is opened
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>

<!-- b-popover-content.vue -->

变体和自定义类

BootstrapVue 的弹出框通过我们的自定义 CSS 支持上下文颜色变体，可以通过使用指令修饰符或配置选项来实现

<template>
  <b-container fluid>
    <b-row class="text-center">
      <b-col>
        <b-button
          v-b-popover.hover.v-danger="{ content: 'Popover content' }"
          title="Danger variant"
        >
          Danger Modifier
        </b-button>
      </b-col>
      <b-col>
        <b-button
          v-b-popover.hover="{ variant: 'info',  content: 'Popover content' }"
          title="Info variant"
        >
          Info Config
        </b-button>
      </b-col>
    </b-row>
  </b-container>
</template>

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

Bootstrap 默认主题变体为：danger、warning、success、primary、secondary、info、light 和 dark。你可以通过 Bootstrap SCSS 变量更改或添加其他变体

可以将自定义类应用于弹出框外部包装

通过使用 customClass 选项属性

<b-button
  v-b-popover.hover="{ customClass: 'my-popover-class', content: 'Popover content' }"
  title="Popover"
>
  Button
</b-button>

指令语法和用法

<b-button v-b-popover:[container].[mod].[mod].[...].[mod]="<value>">Button</b-button>

其中 [container] 可以是（可选）

元素 ID（减去 #），在可见时将弹出框标记放置其中
如果没有提供，则在可见时将弹出框追加到 <body>

其中 [mod] 可以是（全部可选）

定位：top、bottom、left、right、auto；或偏移对齐位置 topleft、topright、bottomleft、bottomright、lefttop、leftbottom、righttop 或 rightbottom（最后找到的获胜，默认为 right）。
事件触发器：click、hover、focus、blur（如果未指定，则默认为 click。 blur 触发器仅为关闭处理程序，如果自身指定，则会转换为 focus）。如果您只想手动控制可见性，请使用 manual。
nofade 关闭动画。
html 启用呈现原始 HTML。默认情况下，HTML 会被转义并转换为文本。
格式为 d### 的延迟值（其中 ### 为毫秒，默认为 50），应用于 hide 和 show。
格式为 ds### 的显示延迟值（其中 ### 为毫秒，默认为 50），仅应用于 show 触发器。
格式为 dh### 的隐藏延迟值（其中 ### 为毫秒，默认为 50），仅应用于 hide 触发器。
格式为 o### 的像素偏移值（其中 ### 为像素数，默认为 0。允许负值）。请注意，如果提供了偏移量，则对齐位置将回退到 top、bottom、left 或 right 之一。
边界设置为 window 或 viewport。用于约束弹出框可视位置的元素。如果未指定，则边界默认为触发元素的滚动父元素（在大多数情况下，这已足够）。
上下文变体，格式为 v-XXX（其中 XXX 为颜色变体名称）。

其中 <value> 可以是（可选）

包含弹出框内容的字符串
生成弹出框内容的函数引用（接收一个参数，该参数是对触发弹出框的 DOM 元素的引用）
包含弹出框更复杂配置的对象，请参阅以下内容以了解可用选项。

选项配置对象属性

属性	类型	默认	说明
`动画`	布尔值	`真`	对弹出框应用 CSS 淡入淡出过渡。
`容器`	字符串 ID 或 HTMLElement 或 `false`	`假`	将弹出框附加到特定元素。示例：`container: '#body'`。此选项特别有用，因为它允许您将弹出框定位在触发元素附近的文档流中 - 这将防止弹出框在窗口调整大小时远离触发元素。当设置为 `false` 时，弹出框将附加到 `body`，或者如果触发元素在模态框内，它将附加到模态框的容器中。
`延迟`	数字或对象	`50`	延迟显示和隐藏弹出框（毫秒）。如果提供数字，则延迟应用于隐藏/显示。对象结构为：`delay: { "show": 500, "hide": 100 }`
`html`	布尔值	`假`	允许在弹出框中使用 HTML。如果为真，则弹出框标题和内容中的 HTML 标记将在工具提示中呈现。如果为假，则标题和内容将作为纯文本插入。如果您担心 XSS 攻击，请使用文本。
`位置`	字符串或函数	`'顶部'`	如何定位弹出框 - `auto`、`top`、`bottom`、`left`、`right`、`topleft`、`topright`、`bottomleft`、`bottomright`、`lefttop`、`leftbottom`、`righttop` 或 `rightbottom`。当指定 `auto` 时，它将动态重新定向工具提示。
`标题`	字符串或函数	`''`	如果 title 属性不存在，则为默认标题值。如果给定函数，则它必须返回一个字符串。
`内容`	字符串或函数	`''`	默认内容值。如果给定函数，则它必须返回一个字符串。
`触发器`	字符串	`'悬停焦点'`	工具提示的触发方式：`click`、`hover`、`focus`。您可以传递多个触发器；用空格分隔它们。如果您只打算以编程方式显示和隐藏工具提示，请指定 `'manual'`。
`偏移`	数字或字符串	`0`	弹出窗口相对于其目标的偏移量。有关更多信息，请参阅 Popper.js 的偏移量文档。
`fallbackPlacement`	字符串或数组	`'flip'`	允许指定 Popper 在后备中使用的位置。可以是 `flip`、`clockwise`、`counterclockwise` 或一个放置数组。有关更多信息，请参阅 Popper.js 的行为文档。
`boundary`	字符串 ID 或 HTMLElement	`'scrollParent'`	弹出窗口在视觉上受到约束的容器。在大多数情况下，默认值就足够了，但如果目标元素位于具有溢出滚动的较小容器中，则可能需要更改此值。支持的值：`'scrollParent'`（默认值）、`'viewport'`、`'window'` 或对 HTML 元素的引用。
`boundaryPadding`	数字	`5`	用于定义边界和弹出窗口之间最小距离的像素量。这确保弹出窗口始终在其容器边缘之间留有少量填充。
`variant`	字符串	`null`	弹出窗口的上下文颜色变体。
`customClass`	字符串	`null`	应用于弹出窗口外部包装元素的自定义类名。
`id`	字符串	`null`	在弹出窗口根元素上使用的 ID。如果没有提供，将自动生成一个 ID。如果你确实提供了 ID，则必须保证在呈现的页面上是唯一的。
`disabled`	布尔值	`假`	设置为 `true` 以禁用弹出窗口

用法

最简单的用法

v-b-popover="'This is a Popover!'"

或使用元素的 title 属性作为弹出窗口标题

v-b-popover title="This is a popover header"
v-b-popover="'This is popover content'" title="This is popover header"

或提供一个标题和内容的对象

v-b-popover="{title:'Popover header', content:'Popover content'}"

启用 HTML 内容/标题

v-b-popover.html="'<em>Emphasis</em> in content'" title="<strong>Bolded title</strong>"

放置示例

v-b-popover.top

触发示例

v-b-popover => Default of click
v-b-popover.hover => Hover only
v-b-popover.click => Click only
v-b-popover.hover.focus => Both hover and focus

组合

v-b-popover.hover.bottom => Show on hover and place at bottom
v-b-popover.bottom.hover => Same as above
v-b-popover.bottom.click.html => Show on click and place at bottom with HTML content

通过 $root 事件隐藏和显示弹出窗口

你可以通过在 $root 上发出 bv::hide::popover 事件来关闭（隐藏）所有打开的弹出窗口

this.$root.$emit('bv::hide::popover')

要关闭特定弹出窗口，请将触发元素的 id 或弹出窗口的 id（如果在配置对象中提供了该 ID）作为第一个参数传递

this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')

要打开特定弹出窗口，请在发出 bv::show::popover 事件时将触发元素的 id 或弹出窗口的 id（如果在配置对象中提供了该 ID）作为第一个参数传递

this.$root.$emit('bv::show::popover', 'my-trigger-button-id')

要同时打开所有弹出窗口，请在发出 bv::show::popover 事件时省略 id 参数。

这些事件适用于弹出窗口的组件和指令版本。

请注意，触发元素必须存在于 DOM 中并处于可见状态，以便弹出窗口实例化并显示。

通过 $root 事件禁用和启用弹出框

可以通过在 $root 上发出 bv::disable::popover 事件来禁用所有弹出框

this.$root.$emit('bv::disable::popover')

要禁用特定弹出框，请将触发元素的 id 或弹出框的 id（如果在配置对象中提供了该 id）作为第一个参数传递

this.$root.$emit('bv::disable::popover', 'my-trigger-button-id')

要启用特定弹出框，请将触发元素的 id 或弹出框的 id（如果在配置对象中提供了该 id）作为第一个参数传递，同时发出 bv::enable::popover 事件

this.$root.$emit('bv::enable::popover', 'my-trigger-button-id')

要同时启用所有弹出框，请在发出 bv::enable::popover 事件时省略 id 参数。

这些事件适用于弹出框的组件和指令版本。

请注意，触发元素必须存在于 DOM 中，才能启用或禁用弹出框。

另请参见

指令参考

导入单个指令

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

指令	命名导出	导入路径
`v-b-popover`	`VBPopover`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

此插件包含上面列出的所有单个指令。

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

示例

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

概述

定位

Popover 顶部

Popover 左上

Popover 右上

Popover 右侧

Popover 右上

Popover 右下

Popover 底部

Popover 左下

Popover 右下

Popover 左侧

Popover 左上

Popover 左下

触发器

使弹出窗口适用于键盘和辅助技术用户

在 `<button>` 元素上使用 `focus` 触发器的注意事项

下次单击时关闭（自动关闭）

标题和内容

变体和自定义类

指令语法和用法

用法

通过 $root 事件隐藏和显示弹出窗口

通过 $root 事件禁用和启用弹出框

另请参见

指令参考

导入单个指令

作为 Vue.js 插件导入

概述

定位

Popover 顶部

Popover 左上

Popover 右上

Popover 右侧

Popover 右上

Popover 右下

Popover 底部

Popover 左下

Popover 右下

Popover 左侧

Popover 左上

Popover 左下

触发器

使弹出窗口适用于键盘和辅助技术用户

在 <button> 元素上使用 focus 触发器的注意事项

下次单击时关闭（自动关闭）

标题和内容

变体和自定义类

指令语法和用法

用法

通过 $root 事件隐藏和显示弹出窗口

通过 $root 事件禁用和启用弹出框

另请参见

指令参考

导入单个指令

作为 Vue.js 插件导入

在 `<button>` 元素上使用 `focus` 触发器的注意事项