Наведение

Обзор

Директиву v-b-hover можно использовать как альтернативу использованию пользовательского CSS для обработки состояний наведения.

• v-b-hover вызовет ваш метод обратного вызова с логическим значением, указывающим, наведен ли элемент или нет.
• Директиву можно разместить практически на любом элементе или компоненте.
• Внутри BootstrapVue использует эту директиву в нескольких компонентах.

Синтаксис и использование директив

<div v-b-hover="callback">контент</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' : ''">Наведите курсор на эту область</span>
    </div>
  </div>
</template>

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

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

Доступность concerns

Состояние наведения не следует использовать для передачи особого значения, поскольку пользователи программ чтения с экрана и пользователи, работающие только с клавиатурой, обычно не могут активировать состояние наведения на элементах.