懸停

v-b-hover 是一個輕量的指令，能讓您在某個元素變成懸停或非懸停狀態時採取回應。

在 BootstrapVue 中從 v2.5.0 開始提供

概觀

v-b-hover 指令可以用來作為處理懸停狀態自訂 CSS 的替代方案。

v-b-hover 將呼叫您的 callback 方法，並提供一個布林值以指示元素是否為懸停。
此指令幾乎可以用於所有的元素或元件。
BootstrapVue 在內部使用此指令於數個元件中。

指令語法和使用

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

需要 callback 的情況

當懸停狀態發生變動時會呼叫的函式參照。callback 會傳入一個單一的布林值引數。 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>

真實範例

在以下範例中，我們會交換圖示與文字顏色，視元素的 hover 狀態而定

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

輔助功能的疑慮

Hover 狀態不應拿來傳達特定意涵，因為螢幕閱讀器使用者與僅使用鍵盤的使用者通常無法在元素上觸發 hover 狀態。

指令參考

導入個別指令

你可以透過下列命名匯出，將個別指令匯入至你的專案

指令	命名匯出	匯入路徑
`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)