ホバー

v-b-hover は、要素がホバーされたとき、またはホバーが解除されたときに反応できるようにする軽量なディレクティブです。

BootstrapVue v2.5.0 から利用可能

概要

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)