Хотя мы могли бы использовать псевдокласс CSS :hover для настройки стилей элементов при наведении курсора мыши, Vuetify предлагает удобный способ сделать это с помощью компонента v-hover. Давайте посмотрим, как мы можем использовать его в этой статье.

Компонент v-hover

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card
        class="ma-4 pa-4"
        width="200"
        height="200"
        :elevation="hover ? 12 : 2"
      >
        Hover over me!
      </v-card>
    </v-hover>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Слот v-hover по умолчанию предоставляет реквизит hover, значение которого изменяется в зависимости от текущего состояния наведения дочернего элемента компонента наведения; когда мышь не зависла над ним, hover остается false. В нашем случае это установит высоту карты на 2:

И когда мы наводим на него курсор, он становится истинным, а высота карты становится равной 12:

Задержки открытия при наведении

Мы можем отсрочить изменение реквизита hover с false на true с помощью реквизита open-delay. В приведенном ниже коде мы используем open-delay, чтобы установить задержку в 200 мс, чтобы реквизит hover стал true при наведении курсора мыши:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" open-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Задержки закрытия при наведении

Точно так же мы можем отложить свойство hover с true на false после того, как мышь покинет его, с помощью свойства close-delay. Таким образом, после того, как мышь покинет карту, ​​потребуется 200 мс, чтобы ее высота уменьшилась:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" close-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Скачать бесплатную копию здесь!

Отключенная опора

Мы можем отключить функцию наведения с помощью реквизита disabled:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" disabled>
      <v-card
        :elevation="hover ? 12 : 2"
        class="mx-auto"
        height="100"
        max-width="250"
      >
        <v-card-text class="my-4 text-center text-h6">
          Hover disabled
        </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

При наведении курсора на карточку ничего не произойдет.

Hover-списки

Мы можем комбинировать v-hover и v-for, чтобы выделить один элемент, когда пользователь взаимодействует со списком:

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

Когда мы наводим курсор на одну из карт, скажем, B, она выделяется:

Переходы при наведении

С помощью компонента hover мы можем создавать компоненты, которые очень индивидуально реагируют на взаимодействие с пользователем. Например:

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card class="ma-4 pa-4" width="300">
        <p class="mb-4">Free music for everyone!</p>
        <v-expand-transition>
          <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
        </v-expand-transition>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

При наведении курсора на карточку выдвигается дополнительная часть, содержащая кнопку Зарегистрироваться (благодаря компоненту v-expand-transition):

Краткое содержание

Vuetify предоставляет компонент v-hover для обработки переключения стилей компонентов в зависимости от их текущего состояния наведения. Он предоставляет параметры настройки, такие как задержка времени, необходимого для обнаружения событий наведения.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов.

Получить обновленную статью на codingbeautydev.com.