Пост Создание пользовательского компонента всплывающей подсказки в Vue впервые появился на Qvault.
Существует множество библиотек, которые за считанные минуты заставят вас работать с хорошим решением для всплывающей подсказки. Однако, если вы похожи на меня, вы устали от гигантских деревьев зависимостей, которые могут сломаться в любой момент. По этой причине мы собираемся создать собственный компонент всплывающей подсказки для одного файла, который вы можете создать самостоятельно и настроить по своему усмотрению. Это может занять 15 минут вместо 3… извините за это.
Как оказалось, это также шаблон для компонента всплывающей подсказки, который мы используем в приложении для кодирования Qvault.
Конечная цель
Мы создаем компонент с одним файлом, поэтому это будет один файл со следующей структурой:
<template>
</template>
<script>
</script>
<style scoped>
</style>
В конце этого пошагового руководства у нас будет компонент всплывающей подсказки, который плавает над целевым элементом (элементами), появляется и исчезает, активируется при наведении и может повторно использоваться во всем нашем приложении. Давайте рассмотрим каждый раздел за раз.
HTML
<template>
<div class="tooltip-box">
<slot />
<div
class="tooltip"
>
<span
class="text"
>{{ text }}</span>
</div>
</div>
</template>
Здесь довольно простая установка. Нам нужно:
- Внешний
tooltip-box
для инкапсуляции всего компонента и обеспечения позиционирования. - Тег слота для внедрения дочернего компонента (независимо от того, на что наведен курсор, чтобы отобразить всплывающую подсказку).
- A
span
, в котором будет размещаться текст нашей всплывающей подсказки.
JavaScript
export default {
props: {
text: {
type: String,
required: true
}
}
};
Довольно просто, все, что нам нужно, это необходимая поддержка для наших пользователей, чтобы указать, что они хотят, чтобы всплывающая подсказка говорила.
CSS
.tooltip-box {
position: relative;
display: inline-block;
}
.tooltip-box:hover .tooltip{
opacity: 1;
}
.tooltip {
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 2px;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
position: absolute;
z-index: 1;
background: #a782e8;
}
.text::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #a782e8 transparent transparent transparent;
}
CSS, безусловно, самая интересная часть. Пара ключевых моментов:
- Нам нужно убедиться, что элемент верхнего уровня,
tooltip-box
, расположен относительно, чтобы наше абсолютное позиционирование работало. - Мы используем переход непрозрачности, чтобы всплывающая подсказка появлялась и исчезала из поля зрения.
- Свойство
z-index
гарантирует, что всплывающая подсказка находится поверх того, над чем нужно навести курсор. - Свойство
.text::after
создает маленький треугольный указатель в нижней части всплывающей подсказки.
Полный компонент:
<template>
<div class="tooltip-box">
<slot />
<div
class="tooltip"
>
<span
class="text"
>{{ text }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
required: true
}
}
};
</script>
<style scoped>
.tooltip-box {
position: relative;
display: inline-block;
}
.tooltip-box:hover .tooltip{
opacity: 1;
}
.tooltip {
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 2px;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
position: absolute;
z-index: 1;
background: #a782e8;
}
.text::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #a782e8 transparent transparent transparent;
}
</style>
И как его использовать:
<Tooltip
text="Difficulty"
>
<span> hover over me </span>
</Tooltip>
Спасибо за чтение!
Подпишитесь на нас в Твиттере @q_vault, если у вас есть какие-либо вопросы или комментарии
Пройдите игровые курсы кодирования в Qvault Classroom
Подпишитесь на нашу рассылку, чтобы получать больше образовательных статей