悬停

v-b-hover 是一个轻量级指令，它允许你在元素悬停或取消悬停时做出反应。

自 v2.5.0 起在 BootstrapVue 中可用

概述

v-b-hover 指令可用作使用自定义 CSS 处理悬停状态的替代方案。

v-b-hover 将使用一个布尔值调用你的回调方法，指示元素是否悬停。
该指令可以放置在几乎任何元素或组件上。
在内部，BootstrapVue 在多个组件中使用此指令。

指令语法和用法

<div v-b-hover="callback">content</div>

需要回调函数时

当悬停状态发生更改时将调用的函数引用。回调函数传递一个布尔值参数。 true 表示元素（或组件）被用户的指针设备悬停，或 false 表示元素未被悬停。

该指令没有修饰符。

用法示例

<template>
  <div v-b-hover="hoverHandler"> ... </div>
</template>

<script>
  export default {
    methods: {
      hoverHandler(isHovered) {
        if (isHovered) {
          // Do something
        } else {
          // Do something else
        }
      }
    }
  }
</script>

实时示例

在以下示例中，我们根据元素的悬停状态交换图标和文本颜色

<template>
  <div>
    <div v-b-hover="handleHover" class="border rounded py-3 px-4">
      <b-icon v-if="isHovered" icon="battery-full" scale="2"></b-icon>
      <b-icon v-else icon="battery" scale="2"></b-icon>
      <span class="ml-2" :class="isHovered ? 'text-danger' : ''">Hover this area</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isHovered: false
      }
    },
    methods: {
      handleHover(hovered) {
        this.isHovered = hovered
      }
    }
  }
</script>

<!-- b-v-hover-example.vue -->

无障碍问题

悬停状态不应用来传达特殊含义，因为屏幕阅读器用户和仅键盘用户通常无法在元素上触发悬停状态。

指令参考

导入单个指令

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

指令	命名导出	导入路径
`v-b-hover`	`VBHover`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

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

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

示例

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