弹出框

弹出框功能提供类似工具提示的行为，可以通过 <b-popover> 组件或 v-b-popover 指令轻松应用到任何交互式元素。

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

  <b-button id="popover-target-1">
    Hover Me
  </b-button>
  <b-popover target="popover-target-1" triggers="hover" placement="top">
    <template #title>Popover Title</template>
    I am popover <b>component</b> content!
  </b-popover>
</div>

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

概述

使用弹出框组件时需要了解的事项

弹出框依赖于第三方库 Popper.js 进行定位。
弹出框需要 BootstrapVue 的自定义 SCSS/CSS 才能正常运行，并适用于各种变体。
将 container 指定为 null（默认值，附加到 <body>）以避免在更复杂的组件（如输入组、按钮组等）中出现渲染问题。你可以使用 container 来选择性地指定一个不同的元素，以附加呈现的弹出框。
在隐藏元素上触发弹出框将不起作用。
对于 disabled 元素的弹出框，必须在包装元素上触发。
当从跨多行的超链接触发时，弹出框将居中。在 <a>、<b-link> 和 <router-link> 上使用 white-space: nowrap; 以避免此行为。

目标

目标是触发弹出框的触发器元素（或组件）。目标通过 target 属性指定，可以是以下任何一种

标识触发器元素 ID 的字符串（或组件根元素的 ID）
对 HTMLElement 或 SVGElement 的引用（ref）（例如，通过 this.$refs.refName）
对组件的引用（ref），该组件的根元素是 HTMLElement 或 SVGElement（例如，通过 this.$refs.refName）
返回对 HTMLElement 或 SVGElement 的引用的函数（回调）

有关引用的更多信息，请参阅官方 Vue 文档。

注意

目标元素必须在挂载 <b-popover> 之前存在于文档中。如果在挂载期间未找到目标元素，则弹出框将永远不会打开。始终将 <b-popover> 组件放置在 DOM 中低于目标元素的位置。如果将回调函数用作目标元素，此规则也适用，因为该回调仅在挂载时调用一次。

HTMLElement 指的是标准 HTML 元素，如 <div>、<button> 等，而 SVGElement 指的是 <svg> 或 SVG 的受支持子元素。

定位

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

参考弹出框指令文档以获取定位的实际示例。

触发器

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

如果弹出框有多个触发器，则必须清除所有触发器，弹出框才会关闭。即，如果弹出框的触发器是 focus click，并且它是由 focus 打开的，然后用户单击触发器元素，他们必须再次单击它并移动焦点才能关闭弹出框。

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

<b-button id="link-button" href="#" tabindex="0">
  Link button with popover component
</b-button>
<b-popover target="link-button" title="Popover title" triggers="focus">
  Popover content
</b-popover>

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

单独使用 focus 触发器，以便在下一次用户单击时关闭弹出框。 focus 还使弹出框在 focus 和 click 上同时激活（因为单击使元素在大多数浏览器中接收焦点，假设它在页面的选项卡序列中）。

但是，你可以将触发器指定为 click blur，这样一来，只有单击才会激活弹出框，而单击该元素或失去对另一个元素或文档部分的焦点，都会关闭弹出框。

特殊的 blur 触发器必须与 click 触发器结合使用。

<template>
  <b-container fluid>
    <h5 class="my-3">Placement</h5>
    <b-row>
      <b-col
        v-for="placement in placements"
        :key="placement"
        md="4"
        class="py-4 text-center"
      >
        <b-button :id="`popover-1-${placement}`" variant="primary">{{ placement }}</b-button>
        <b-popover
          :target="`popover-1-${placement}`"
          :placement="placement"
          title="Popover!"
          triggers="hover focus"
          :content="`Placement ${placement}`"
        ></b-popover>
      </b-col>
    </b-row>

    <h5 class="my-3">Content via properties or slots</h5>
    <b-row>
      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-2" variant="primary">Using properties</b-button>
        <b-popover
          target="popover-2"
          title="Prop Examples"
          triggers="hover focus"
          content="Embedding content using properties is easy"
        ></b-popover>
      </b-col>

      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-3" variant="primary">Using slots</b-button>
        <b-popover target="popover-3" triggers="hover focus">
          <template #title>Content via Slots</template>
          Embedding content <span class="text-danger">using slots</span> affords you
          <em>greater <strong>control.</strong></em> and basic HTML support.
        </b-popover>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        placements: [
          'topright',
          'top',
          'topleft',
          'bottomright',
          'bottom',
          'bottomleft',
          'righttop',
          'right',
          'lefttop',
          'rightbottom',
          'left',
          'leftbottom'
        ]
      }
    }
  }
</script>

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

通过道具设置组件选项

道具	默认值	描述	支持的值
`target`	`null`	元素字符串 ID，或对元素或组件的引用，你希望该元素或组件触发弹出框。必需	任何有效的文档中唯一元素 ID，或文档中元素/组件引用
`title`	`null`	弹出框标题（仅文本，无 HTML）。如果需要 HTML 或响应式，请使用 `title` 命名槽	纯文本
`content`	`null`	弹出框内容（仅文本，无 HTML）。如果需要 HTML 或响应式，请使用默认槽	纯文本
`placement`	`'right'`	弹出框相对于触发元素的位置。	`auto`、`top`、`bottom`、`left`、`right`、`topleft`、`topright`、`bottomleft`、`bottomright`、`lefttop`、`leftbottom`、`righttop`、`rightbottom`
`fallback-placement`	`'flip'`	弹出框相对于触发元素的自动翻转位置行为。	`flip`、`clockwise`、`counterclockwise`，或从左到右评估的有效位置数组
`disabled`	`false`	弹出框显示状态的编程控制。建议与 sync 修饰符一起使用。	`true`、`false`
`triggers`	`'click'`	用空格分隔的事件列表，将使用内置处理触发弹出框的打开/关闭	`hover`、`focus`、`click`。注意，`blur` 是一个特殊用例，用于在下一次点击时关闭弹出框。
`no-fade`	`false`	设置为 `true` 时禁用淡入淡出动画	`true` 或 `false`
`delay`	`50`	通过指定毫秒数来延迟显示和隐藏弹出框。还可以定义为 `{ show: 100, hide: 400 }` 形式的对象，允许不同的显示和隐藏延迟	`0` 及以上，仅限整数。
`offset`	`0`	通过指定像素数来偏移弹出框的中心。还会影响弹出框箭头的位置。	任何负整数或正整数
`container`	`null`	元素字符串 ID，用于将呈现的弹出框附加到其中。如果 `null` 或找不到元素，则将弹出框附加到 `<body>`（默认）	任何有效的文档中唯一元素 ID。
`boundary`	`'scrollParent'`	弹出框在视觉上受限的容器。在大多数情况下，默认值就足够了，但如果目标元素位于具有溢出滚动的较小容器中，则可能需要更改此值	`'scrollParent'`（默认）、`'viewport'`、`'window'` 或对 HTML 元素的引用。
`boundary-padding`	`5`	用于定义边界和弹出框之间最小距离的像素数。这确保弹出框始终在其容器边缘之间留有一些填充。	任何正数
`variant`	`null`	弹出框的上下文颜色变体	任何上下文主题颜色变体名称
`custom-class`	`null`	应用于弹出框外部包装元素的自定义类名	一个字符串
`id`	`null`	在弹出框根元素上使用的 ID。如果未提供，则会自动生成一个。如果你确实提供了 ID，则必须保证它在呈现的页面上是唯一的。	有效的唯一元素 ID 字符串

变体和自定义类

BootstrapVue 的弹出框通过我们的自定义 CSS，通过 variant 属性支持上下文颜色变体

<div class="text-center">
  <b-button id="popover-button-variant" href="#" tabindex="0">Button</b-button>
  <b-popover target="popover-button-variant" variant="danger" triggers="focus">
    <template #title>Danger!</template>
    Danger variant popover
  </b-popover>
</div>

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

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

可以通过使用 custom-class 属性将自定义类应用于弹出框外部包装器 <div>

<div class="text-center">
  <b-button id="my-button">Button</b-button>
  <b-popover target="my-button" custom-class="my-popover-class">
    <template #title>Popover Title</template>
    Popover content
  </b-popover>
</div>

variant 和 custom-class 是响应式的，可以在弹出框打开时更改。

请参阅弹出框指令文档，了解如何将变体和自定义类应用于指令版本。

你可以通过可同步布尔值 show 属性手动控制弹出框的可见性。将其设置为 true 将显示弹出框，而将其设置为 false 将隐藏弹出框。

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-sync" variant="primary">I have a popover</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="show = !show">Toggle Popover</b-button>

      <b-popover :show.sync="show" target="popover-button-sync" title="Popover">
        Hello <strong>World!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

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

以编程方式控制还可以通过按引用向弹出框提交 'open' 和 'close' 事件来实现。

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-event" variant="primary">I have a popover</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onOpen">Open</b-button>
      <b-button class="px-1" @click="onClose">Close</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-event" title="Popover">
      Hello <strong>World!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.popover.$emit('open')
      },
      onClose() {
        this.$refs.popover.$emit('close')
      }
    }
  }
</script>

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

要使弹出框在初始渲染时显示，只需在 <b-popover> 上添加 show 属性

<div class="text-center">
  <b-button id="popover-button-open" variant="primary">Button</b-button>

  <b-popover show target="popover-button-open" title="Popover">
    I start <strong>open</strong>
  </b-popover>
</div>

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

通过 'show' 属性或事件调用以编程方式打开的弹出框只能以编程方式关闭。内置触发器将无法正常工作，因为触发器事件将尝试打开弹出框，即使它已经打开。

在下面的示例中，当第一个弹出框通过 'open' 事件打开时，需要点击两次按钮才能将其关闭。试玩下面的演示以了解这一点。当你希望优雅地处理弹出框组件的编程控制和用户交互触发器时，你应该禁用内置触发器并自行处理控制，如第二个弹出框所示。

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-manual-1" variant="primary" ref="button">Unreliable</b-button>

      <b-popover target="popover-manual-1" :show.sync="pop1" triggers="click">
        I can be stubborn sometimes.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button id="popover-manual-2" variant="primary" ref="button" @click="pop2 = !pop2">
        Comfortably Numb
      </b-button>

      <b-popover target="popover-manual-2" :show.sync="pop2" triggers="">
        I do believe it's working, good.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="popOpen">Open</b-button>
      <b-button class="px-1" @click="popClose">Close</b-button>
      <b-button class="px-1" @click="popToggle">Toggle</b-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pop1: false,
        pop2: false
      }
    },
    methods: {
      popOpen() {
        this.pop1 = this.pop2 = true
      },
      popClose() {
        this.pop1 = this.pop2 = false
      },
      popToggle() {
        this.pop1 = !this.pop1
        this.pop2 = !this.pop2
      }
    }
  }
</script>

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

你还可以使用 $root 事件来触发弹出框的显示和隐藏。有关详细信息，请参阅下面的通过 $root 事件隐藏和显示弹出框部分。

您可以通过可同步布尔属性 disabled（默认值为 false）来禁用弹出框。将其设置为 true 将禁用弹出框。如果在将 disabled 设置为 false 时弹出框当前可见，它将保持可见，直到启用或以编程方式关闭。如果通过 $root 事件禁用/启用弹出框（见下文），只要您提供了 .sync 属性修饰符，您的 disabled 值将被更新。

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable" variant="primary">I have a popover</b-button>
    </div>

    <div class="p-2">
      <b-button @click="disabled = !disabled">
        {{ disabled ? 'Enable' : 'Disable' }} Popover by prop
      </b-button>
      <b-button @click="disableByRef">
        {{ disabled ? 'Enable' : 'Disable' }} Popover by $ref event
      </b-button>

      <b-popover
        :disabled.sync="disabled"
        target="popover-button-disable"
        title="Popover"
        ref="popover"
      >
        Hello <strong>World!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        disabled: false
      }
    },
    methods: {
      disableByRef() {
        if (this.disabled) {
          this.$refs.popover.$emit('enable')
        } else {
          this.$refs.popover.$emit('disable')
        }
      }
    }
  }
</script>

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

还可以通过按引用向弹出框提交 'enable' 和 'disable' 事件来影响以编程方式控制。

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable-event" variant="primary">I have a popover</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onEnable">Enable</b-button>
      <b-button class="px-1" @click="onDisable">Disable</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-disable-event" title="Popover">
      Hello <strong>World!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onEnable() {
        this.$refs.popover.$emit('enable')
      },
      onDisable() {
        this.$refs.popover.$emit('disable')
      }
    }
  }
</script>

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

禁用时，可以通过编程方式打开弹出框（通过 show 属性、方法或事件）。

您还可以使用 $root 事件来触发禁用和启用弹出框。有关详细信息，请参阅下文的通过 $root 事件禁用和启用弹出框部分。

只需要快速弹出框，而不需要太多标记？使用 v-b-popover 指令

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.top="'Popover!'" title="Title" variant="primary">Top</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.right="'Popover!'" title="Title" variant="primary">Right</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.left="'Popover!'" title="Title" variant="primary">Left</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottom="'Popover!'" title="Title" variant="primary">Bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

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

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

您甚至可以使 <b-popover> 内容具有交互性。请记住不要使用 focus 或触发器（仅使用 click）。

如果您绝对必须使用除 click 之外的触发器（或希望在第二次单击触发器元素时禁用关闭弹出框），则可以

侦听 <b-popover> 元素上的 hide 事件，并在传递给 hide 处理程序的 BvEvent 对象上调用 preventDefault() 方法（在适当的时候）；
在弹出框开始打开时（通过 show 事件）禁用触发器元素（如果可能），并在适当的时候重新启用它（即通过 hide 或 hidden 事件）。

出于实际目的，交互式内容弹出框应最小化。弹出框的最大宽度由 Bootstrap v4 CSS 硬编码为 276px。在小屏幕上，高弹出框在移动设备（例如智能手机）上可能更难处理。

<template>
  <div id="my-container">
    <div class="my-3">
      <!-- Our triggering (target) element -->
      <b-button id="popover-reactive-1" variant="primary" ref="button">
        Reactive Content Using Slots
      </b-button>
    </div>

    <!-- Output from the popover interaction -->
    <b-card title="Returned values:" v-if="input1Return && input2Return">
      <p class="card-text" style="max-width: 20rem;">
        Name: <strong>{{ input1Return }}</strong><br>
        Color: <strong>{{ input2Return }}</strong>
      </p>
    </b-card>

    <!-- Our popover title and content render container -->
    <!-- We use placement 'auto' so popover fits in the best spot on viewport -->
    <!-- We specify the same container as the trigger button, so that popover is close to button -->
    <b-popover
      target="popover-reactive-1"
      triggers="click"
      :show.sync="popoverShow"
      placement="auto"
      container="my-container"
      ref="popover"
      @show="onShow"
      @shown="onShown"
      @hidden="onHidden"
    >
      <template #title>
        <b-button @click="onClose" class="close" aria-label="Close">
          <span class="d-inline-block" aria-hidden="true">&times;</span>
        </b-button>
        Interactive Content
      </template>

      <div>
        <b-form-group
          label="Name"
          label-for="popover-input-1"
          label-cols="3"
          :state="input1state"
          class="mb-1"
          description="Enter your name"
          invalid-feedback="This field is required"
        >
          <b-form-input
            ref="input1"
            id="popover-input-1"
            v-model="input1"
            :state="input1state"
            size="sm"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label="Color"
          label-for="popover-input-2"
          label-cols="3"
          :state="input2state"
          class="mb-1"
          description="Pick a color"
          invalid-feedback="This field is required"
        >
          <b-form-select
            id="popover-input-2"
            v-model="input2"
            :state="input2state"
            :options="options"
            size="sm"
          ></b-form-select>
        </b-form-group>

        <b-alert show class="small">
          <strong>Current Values:</strong><br>
          Name: <strong>{{ input1 }}</strong><br>
          Color: <strong>{{ input2 }}</strong>
        </b-alert>

        <b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
        <b-button @click="onOk" size="sm" variant="primary">Ok</b-button>
      </div>
    </b-popover>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input1: '',
        input1state: null,
        input2: '',
        input2state: null,
        options: [{ text: '- Choose 1 -', value: '' }, 'Red', 'Green', 'Blue'],
        input1Return: '',
        input2Return: '',
        popoverShow: false
      }
    },
    watch: {
      input1(val) {
        if (val) {
          this.input1state = true
        }
      },
      input2(val) {
        if (val) {
          this.input2state = true
        }
      }
    },
    methods: {
      onClose() {
        this.popoverShow = false
      },
      onOk() {
        if (!this.input1) {
          this.input1state = false
        }
        if (!this.input2) {
          this.input2state = false
        }
        if (this.input1 && this.input2) {
          this.onClose()
          // Return our popover form results
          this.input1Return = this.input1
          this.input2Return = this.input2
        }
      },
      onShow() {
        // This is called just before the popover is shown
        // Reset our popover form variables
        this.input1 = ''
        this.input2 = ''
        this.input1state = null
        this.input2state = null
        this.input1Return = ''
        this.input2Return = ''
      },
      onShown() {
        // Called just after the popover has been shown
        // Transfer focus to the first input
        this.focusRef(this.$refs.input1)
      },
      onHidden() {
        // Called just after the popover has finished hiding
        // Bring focus back to the button
        this.focusRef(this.$refs.button)
      },
      focusRef(ref) {
        // Some references may be a component, functional component, or plain element
        // This handles that check before focusing, assuming a `focus()` method exists
        // We do this in a double `$nextTick()` to ensure components have
        // updated & popover positioned first
        this.$nextTick(() => {
          this.$nextTick(() => {
            ;(ref.$el || ref).focus()
          })
        })
      }
    }
  }
</script>

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

'全局' $root 实例事件

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

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

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

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

要关闭特定弹出框，请将触发元素的 id 或弹出框的 id（如果通过 id 属性提供）作为第一个参数传递

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

要打开（显示）特定弹出框，请将触发元素的 id 或弹出框的 id（如果通过 id 属性提供）作为第一个参数传递，同时发出 bv::show::popover 事件

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 中，才能启用或禁用弹出框。

要侦听任何弹出框打开，请使用

export default {
  mounted() {
    this.$root.$on('bv::popover::show', bvEventObj => {
      console.log('bvEventObj:', bvEventObj)
    })
  }
}

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

可访问性

在当前实现中，弹出框在用作交互式组件时不太容易访问。内容可能不会主动读给屏幕阅读器用户，并且弹出框标记可能不会位于 DOM 中靠近触发元素的位置（因为弹出框通常会附加到 <body> 的末尾）。

在将弹出框用作交互式组件时，应尽可能将焦点转移到弹出框中。当弹出框关闭时，应将焦点返回到触发元素（假设 focus 不用作触发方法），正如我们在上面的示例中所做的那样。

您可能还希望在用户与弹出框内容交互时在弹出框内容中实现焦点限制（在弹出框被用户关闭之前保持焦点在弹出框内）。

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

让弹出框适用于键盘和辅助技术用户

为了允许键盘用户激活弹出框，您应该只将它们添加到传统上可通过键盘聚焦且交互式的 HTML 元素（例如链接或表单控件）。虽然可以通过添加 tabindex="0" 属性使任意 HTML 元素（例如 <span>）可聚焦，但这会为键盘用户在非交互式元素上添加可能令人厌烦且混乱的制表位，并且大多数辅助技术目前不会在这种情况下播报弹出框的内容。此外，不要仅仅依赖 hover 作为弹出框的触发器，因为这会让键盘用户无法触发它们。

虽然您可以通过插槽在弹出框中插入丰富的结构化 HTML 和/或组件，但我们强烈建议您避免添加过多的内容。弹出框目前的工作方式是，一旦显示，其内容就会通过 aria-describedby 属性与触发元素绑定。因此，弹出框的全部内容将作为一条冗长的、不间断的流向辅助技术用户播报（读取）。

此外，虽然也可以在弹出框中包含交互式控件（例如表单元素或链接），但请注意，弹出框目前不管理键盘焦点顺序。当键盘用户打开弹出框时，焦点仍停留在触发元素上，并且由于弹出框通常不会紧跟触发器出现在文档结构中，因此无法保证向前移动/按 Tab 会将键盘用户移入弹出框本身。简而言之，仅仅向弹出框添加交互式控件很可能会让这些控件对键盘用户和辅助技术用户无法访问/无法使用，或者至少会造成不合理的整体焦点顺序。在这些情况下，请考虑改用 <b-modal> 对话框。

组件参考

查看源代码

<b-popover> 属性
<b-popover> 插槽
<b-popover> 事件
<b-popover> $root 事件监听器

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

属性 (单击按升序排列)	类型 (单击按升序排列)	默认值	描述
`boundary`	`HTMLElement` 或 `Object` 或 `String`	`'scrollParent'`	弹出框的边界约束：“scrollParent”、“window”、“viewport”或对 HTMLElement 或组件的引用
`boundary-padding`	`Number` 或 `String`	`50`	弹出框将尝试远离边界元素边缘，像素数由指定
`container`	`HTMLElement` 或 `Object` 或 `String`		可见时附加呈现弹出框的容器元素。默认为 body 元素
`content`	`String`		放置在弹出框正文中的文本
`custom-class`	`String`		应用于弹出框根元素的 CSS 类（或类）
`delay`	`Number` 或 `Object` 或 `String`	`50`	显示和隐藏延迟的值。当指定为数字或字符串时，适用于显示和隐藏。使用对象形式分别设置显示和隐藏延迟
`disabled`	`Boolean`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`fallback-placement`	`Array` 或 `String`	`'flip'`	弹出框超出边界时使用的放置。有关更多详细信息，请参阅文档
`id`	`String`		用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`no-fade`	`Boolean`	`false`	设置为 `true` 时，禁用组件上的淡入淡出动画/过渡
`noninteractive`	`Boolean`	`false`
`offset`	`Number` 或 `String`	`0`	与触发目标元素相比，箭头中心的偏移量（以像素为单位）
`placement`	`String`	`'right'`	弹出框的放置：“top”、“bottom”、“right”、“left”、“topleft”、“topright”、“bottomleft”、“bottomright”、“lefttop”、“leftbottom”、“righttop”、“rightbottom” 之一
`show`	`Boolean`	`false`	设置后将显示弹出框
`target` 必需	`HTMLElement` 或 `SVGElement` 或 `Function` 或 `Object` 或 `String`		元素字符串 ID 或对元素或组件的引用，您希望触发弹出框
`title`	`String`		放置在弹出框标题中的文本
`triggers`	`Array` 或 `String`	`'click'`	指定将显示弹出框的触发器。支持的值为“click”、“hover”、“focus”。请参阅文档以了解特殊触发器“blur”和“manual”
`variant`	`String`		将 Bootstrap 主题颜色变体之一应用于组件

名称	描述
`default`	内容插槽（支持 HTML/组件）
`title`	标题的可选插槽（支持 HTML/组件）

事件 (单击按升序排列)	参数	描述
`bv::popover::disabled`	`bvEvent` - BvEvent 对象	当弹出框变为禁用时，在 $root 上发出
`bv::popover::enabled`	`bvEvent` - BvEvent 对象	当弹出框变为启用时，在 $root 上发出
`bv::popover::hidden`	`bvEvent` - BvEvent 对象	当弹出框隐藏时，在 $root 上发出
`bv::popover::hide`	`bvEvent` - BvEvent 对象	当弹出框即将隐藏时，在 $root 上发出。可取消。调用 bvEvent.preventDefault() 以取消隐藏
`bv::popover::show`	`bvEvent` - BvEvent 对象	当弹出框即将显示时，在 $root 上发出。可取消。调用 bvEvent.preventDefault() 以取消显示
`bv::popover::shown`	`bvEvent` - BvEvent 对象	当弹出框显示时，在 $root 上发出
`disabled`	`bvEvent` - BvEvent 对象	当弹出框变为禁用时发出
`enabled`	`bvEvent` - BvEvent 对象	当弹出框变为启用时发出
`hidden`	`bvEvent` - BvEvent 对象	当弹出框隐藏时发出
`hide`	`bvEvent` - BvEvent 对象	当弹出框即将隐藏时发出。可取消。调用 bvEvent.preventDefault() 以取消隐藏
`show`	`bvEvent` - BvEvent 对象	当弹出框即将显示时发出。可取消。调用 bvEvent.preventDefault() 以取消显示
`shown`	`bvEvent` - BvEvent 对象	当弹出框显示时发出

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

事件	参数	描述
`bv::disable::popover`	`id` - 要禁用的弹出框 ID（可选）	当此事件在 $root 上触发时，禁用所有或特定弹出框
`bv::enable::popover`	`id` - 要启用的弹出框 ID（可选）	当此事件在 $root 上触发时，启用所有或特定弹出框
`bv::hide::popover`	`id` - 要隐藏的弹出框 ID（可选）	当此事件在 $root 上触发时，关闭（隐藏）所有或特定打开的弹出框
`bv::show::popover`	`id` - 要显示的弹出框 ID（可选）	当此事件在 $root 上触发时，打开（显示）所有或特定弹出框

导入单个组件

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

组件	命名导出	导入路径
`<b-popover>`	`BPopover`	`bootstrap-vue`

示例

import { BPopover } from 'bootstrap-vue'
Vue.component('b-popover', BPopover)

作为 Vue.js 插件导入

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

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

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

VBPopoverPlugin

示例

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

概述

目标

定位

弹出框顶部

弹出框左上角

弹出框右上角

弹出框右侧

弹出框右上角

弹出框右下角

弹出框底部

弹出框左下角

弹出框右下角

弹出框左侧

弹出框左上角

弹出框左下角

触发器

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

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

`<b-popover>` 组件基本用法

通过道具设置组件选项

变体和自定义类

以编程方式显示和隐藏弹出框

以编程方式禁用弹出框

`v-b-popover` 指令用法

使用响应式内容的高级 `<b-popover>` 用法

'全局' $root 实例事件

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

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

通过 $root 事件侦听弹出框更改

可访问性

让弹出框适用于键盘和辅助技术用户

组件参考

`<b-popover>`

属性

插槽

事件

`$root` 事件侦听器

导入单个组件

作为 Vue.js 插件导入

概述

目标

定位

弹出框顶部

弹出框左上角

弹出框右上角

弹出框右侧

弹出框右上角

弹出框右下角

弹出框底部

弹出框左下角

弹出框右下角

弹出框左侧

弹出框左上角

弹出框左下角

触发器

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

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

<b-popover> 组件基本用法

通过道具设置组件选项

变体和自定义类

以编程方式显示和隐藏弹出框

以编程方式禁用弹出框

v-b-popover 指令用法

使用响应式内容的高级 <b-popover> 用法

'全局' $root 实例事件

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

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

通过 $root 事件侦听弹出框更改

可访问性

让弹出框适用于键盘和辅助技术用户

组件参考

属性

插槽

事件

$root 事件侦听器

导入单个组件

作为 Vue.js 插件导入

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

`<b-popover>` 组件基本用法

`v-b-popover` 指令用法

使用响应式内容的高级 `<b-popover>` 用法

`$root` 事件侦听器