Хотя мы могли бы использовать псевдокласс 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.