Hướng dẫn bootstrap vue hover - bootstrap vue hover

Có sẵn trong bootstrapvue kể từ v2.5.0

Tổng quan

Chỉ thị v-b-hover có thể được sử dụng thay thế cho việc sử dụng CSS tùy chỉnh để xử lý các trạng thái lơ lửng.

• v-b-hover sẽ gọi phương thức gọi lại của bạn với giá trị boolean cho biết nếu phần tử có bị bay lượn hay không.
• Chỉ thị có thể được đặt trên hầu hết mọi yếu tố hoặc thành phần.
• Trong nội bộ, bootstrapvue sử dụng chỉ thị này trong một số thành phần.

Cú pháp và việc sử dụng chỉ thị

<div v-b-hover="callback">contentdiv>

Nơi cần gọi lại:

• Một tham chiếu chức năng sẽ được gọi bất cứ khi nào trạng thái Hover thay đổi. Cuộc gọi lại được thông qua một đối số boolean duy nhất. true chỉ ra rằng phần tử (hoặc thành phần) được di chuột bởi thiết bị trỏ người dùng hoặc

  <template>
    <div v-b-hover="hoverHandler"> ... div>
  template>
  
  <script>
    export default {
      methods: {
        hoverHandler(isHovered) {
          if (isHovered) {
            
          } else {
            
          }
        }
      }
    }
  script>

  0 nếu phần tử không được di chuột.

Chỉ thị không có sửa đổi.

Ví dụ sử dụng

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

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

Ví dụ trực tiếp

Sau đây, chúng tôi đang hoán đổi các biểu tượng và màu văn bản tùy thuộc vào trạng thái di chuột của phần tử:

<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 areaspan>
    div>
  div>
template>

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

Mối quan tâm tiếp cận

Không nên sử dụng trạng thái Hover để truyền đạt ý nghĩa đặc biệt, vì người dùng đầu đọc màn hình và bàn phím chỉ có người dùng thường không thể kích hoạt trạng thái di chuột trên các phần tử.

Tham khảo chỉ thị

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

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

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

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

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

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

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

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