Полное руководство по созданию пользовательского компонента всплывающей подсказки Vue.js с нуля.
Подсказка — это функция, которая предлагает подсказку, описательное сообщение или часть информации об элементе. Когда пользователь наводит курсор, фокусируется или щелкает элемент, всплывающая подсказка отображается в виде небольшой метки рядом с элементом. Всплывающие подсказки особенно полезны для предоставления пояснений, определений или следующих шагов для пользователей, не загромождая ваш пользовательский интерфейс.
В этой статье мы рассмотрим варианты, доступные в настоящее время для создания всплывающих подсказок в приложениях Vue.js. Затем мы создадим наш собственный компонент всплывающей подсказки Vue.js с нуля, используя предоставленную информацию. В нашем примере мы будем использовать Vuetify и библиотеки BootstrapVue.
Начиная
Во-первых, убедитесь, что на вашем компьютере установлен Vue CLI 4.X. Чтобы создать новый проект Vue, выполните в терминале следующую команду:
vue create tooltips
Давайте удалим компоненты по умолчанию в нашем новом проекте и убедимся, что в браузере ничего не отображается. Наш файл App.vue должен выглядеть как блок кода ниже:
<template>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
Создайте всплывающую подсказку в Vuetify
Чтобы установить Vuetify, выполните в терминале следующую команду:
vue add vuetify
Теперь интерфейс командной строки Vue.js установит для нас Vuetify. Чтобы создать всплывающую подсказку, добавьте следующий код в app.vue и снова запустите проект:
<template>
<div>
<v-app>
<div class="text-center d-flex align-center justify-space-around">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Hover on me
</v-btn>
</template>
<span>Bottom tooltip</span>
</v-tooltip>
</div>
</v-app>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
<style>
.container{
margin-top:50px
}
</style>
Каждый компонент из Vuetify должен отображаться внутри компонента <v-app>, а <v-tooltip> может охватывать любой компонент.
В приведенном выше коде у нас есть два основных элемента: <template>, который отображается как простой текст, и <span>. При наведении на кнопку атрибут v-slot активирует всплывающую подсказку, а на экране отображается содержимое <span>:
Вы также можете динамически активировать поведение всплывающей подсказки с помощью следующего кода:
<template>
<div>
<v-app>
<div class="text-center d-flex align-center justify-space-around">
<v-btn @click="show = !show">
toggle
</v-btn>
</div>
<div class="text-center d-flex align-center justify-space-around">
<v-tooltip v-model="show"
bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Hover on me
</v-btn>
</template>
<span >Bottom tooltip</span>
</v-tooltip>
</div>
</v-app>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data () {
return {
show: false,
}
},
};
</script>
<style>
.container{
margin-top:50px
}
</style>
В приведенном выше блоке кода мы создали новую кнопку и добавили состояние внутри компонента.
Изначально для всплывающей подсказки установлено значение false. v-modal позволяет нам выбрать, отображать всплывающую подсказку или нет. Состояние изменяется при нажатии кнопки, как показано на изображении ниже:
Создайте всплывающую подсказку в BootstrapVue
Чтобы установить BootstrapVue, выполните в терминале следующую команду:
npm install vue bootstrap bootstrap-vue
Теперь мы должны зарегистрировать BootstrapVue в основной точке входа нашего приложения. Перейдите к main.js и добавьте код ниже:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
vuetify,
render: (h) => h(App),
}).$mount("#app");
У нас есть два разных метода создания всплывающих подсказок в BootstrapVue, подход компонентов и подход директив. В то время как компонентный подход хорошо подходит для простого стандартного использования, подход с директивами предлагает больше возможностей для настройки поведения всплывающей подсказки.
Имейте в виду, что мы можем вызывать всплывающую подсказку, наводя курсор, фокусируясь или щелкая элемент.
У нас также есть 12 вариантов расположения всплывающей подсказки, где top используется по умолчанию: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop и leftbottom.
Компонентный подход
В BootstrapVue всплывающие подсказки представляют собой компоненты, которые прикрепляются к целевому элементу через идентификатор компонента. Чтобы создать всплывающую подсказку с использованием компонентного подхода, мы можем просто создать кнопку и поместить идентификатор в целевой атрибут.
Добавьте следующий код в App.vue:
<template>
<div class='main'>
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="hover" placement="bottom"
>
I am tooltip <b>component</b> content!
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style>
.main{
display:flex;
justify-content:space-around;
}
</style>
В приведенном выше коде мы создали кнопку с именем b-button и присвоили ей определенный идентификатор tooltip-target-1. Чтобы вызвать всплывающую подсказку для hover, мы можем просто использовать компонент b-tooltip и поместить идентификатор нашей кнопки в целевой атрибут.
Атрибут триггера отвечает за поведение всплывающей подсказки. По умолчанию у нас есть триггеры для hover, focus, click и hover+focus. Мы можем определить положение всплывающей подсказки, используя placement:
Директивный подход
Подход с директивами позволяет нам использовать пользовательские директивы для указания поведения нашего компонента всплывающей подсказки. Чтобы создать всплывающую подсказку с использованием директив, просто используйте v-b-tooltip внутри компонента.
Например, мы можем добавить блок кода ниже к App.vue:
<template>
<div>
<b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary">Right</b-button>
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style></style>
Служите проекту и перейдите в браузер. Ваша всплывающая подсказка должна выглядеть так, как показано на рисунке ниже:
Мы можем изменить поведение всплывающей подсказки при действиях мыши с помощью директив. Давайте добавим больше кнопок в App.vue:
<template>
<div class='main'>
<b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary"
>hover</b-button
>
<b-button v-b-tooltip.focus.right="'Tooltip!'" variant="primary"
>focus</b-button
>
<b-button v-b-tooltip.click.left="'Tooltip!'" variant="primary"
>click</b-button
>
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style>
.main{
display:flex;
justify-content:space-around;
}
</style>
Создать всплывающую подсказку с нуля
С методами, которые мы рассмотрели до сих пор, мы должны установить внешние пакеты для создания всплывающей подсказки, что приводит к увеличению размеров зависимостей. Изменения в наших зависимостях могут привести к поломке нашего приложения. Однако, если вы используете одну всплывающую подсказку, вы можете создать ее с нуля всего за несколько минут вместо установки библиотеки.
В папке component создайте новый файл с именем Tooltip.vue и добавьте следующий код:
<template>
<div class="tooltip-container">
<slot />
<div
class="tooltip"
>
<span
class="text"
>{{ text }}</span>
</div>
</div>
</template>
В приведенном выше блоке кода мы создали основной контейнер всплывающей подсказки, в котором будет размещен весь компонент. Тег slot внедряет дочерний компонент, который активирует всплывающую подсказку. Наконец, простой <span> содержит текст для нашей всплывающей подсказки:
<script>
export default {
props: {
text: {
type: String,
required: true
}
},
}
</script>
Наконец, мы добавим реквизит для нашего текста в виде строки:
<style scoped>
.tooltip-container {
position: relative;
display: inline-block;
margin:100px;
}
.tooltip-container: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: #000000;
}
.text::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000000 transparent transparent transparent;
}
</style>
Положение основного контейнера является относительным. Для всплывающей подсказки мы установили z-index на 1, отображая всплывающую подсказку над элементом.
Затем мы визуализировали небольшой простой кончик стрелки. По умолчанию непрозрачность установлена на 0. Когда пользователь наводит курсор на компонент внутри нашего компонента всплывающей подсказки, непрозрачность устанавливается на 1, отображая нашу всплывающую подсказку над элементом.
Чтобы использовать нашу пользовательскую подсказку, импортируйте и зарегистрируйте подсказку в App.vue:
<template>
<div >
<Tooltip
text="I am button"
>
<button> hover over me </button>
</Tooltip>
</div>
</template>
<script>
import Tooltip from './components/Tooltip';
export default {
name: "App",
components: {
Tooltip
},
};
</script>
Давайте запустим наш проект и посмотрим результат в браузере:
Заключение
Всплывающие подсказки — это полезное и интуитивно понятное дополнение к вашему приложению, которое улучшает ваш UX, направляя пользователей и заранее отвечая на вопросы. Теперь вы знаете несколько различных способов создания всплывающей подсказки в Vue.js: от использования таких библиотек, как BootstrapVue и Vuetify, до создания с нуля.
Использование библиотеки для создания всплывающей подсказки довольно просто, однако, если вас беспокоит размер вашего дерева зависимостей, создать собственную всплывающую подсказку так же просто.
Хотя в наших примерах использовался простой компонент всплывающей подсказки, вы можете настроить свой с помощью других цветов, значков, движений и многого другого. Надеюсь, вам понравился этот урок!
Исходное сообщение было опубликовано на LogRocket
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
