hover指令

v-b-hover是一种轻量型指令，它使您可以在元素悬停或取消悬停时做出反应。

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

The v-b-hover v-b-hover指令已在 2.5.0版本添加。

总览

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

指令语法和用法

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

需要回调的地方：

悬停状态更改时将调用的函数引用。回调传递一个布尔参数。 true 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>

无障碍问题

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

指令参考

导入单个指令

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

Directive	Named Export	Import Path
`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插件

该插件包括上面列出的所有单个指令。

Named Export	Import Path
`VBHoverPlugin`	`bootstrap-vue`

列如:

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