Простые в использовании компоненты всплывающей подсказки для Vue.js

Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим некоторые простые в использовании компоненты всплывающей подсказки Vue.js, которые мы все можем использовать в наших приложениях Vue.

v-подсказка

v-tooltip - это простая в использовании всплывающая подсказка с множеством опций, позволяющих сделать всплывающую подсказку так, как нам нравится.

Для его установки запускаем:

npm install --save v-tooltip

Затем мы можем использовать его, написав следующий код:

main.js :

import Vue from "vue";
import App from "./App.vue";
import VTooltip from "v-tooltip";
Vue.use(VTooltip);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <button v-tooltip="'Hello'">Show Tooltip</button>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Все, что нам нужно было сделать, это импортировать и зарегистрировать компонент, после чего мы можем ссылаться на него в нашем шаблоне.

Когда мы наводим курсор на кнопку, мы должны увидеть Hello.

Мы также можем использовать v-popover с нашим собственным компонентом для всплывающей подсказки. Например, мы можем написать следующее:

App.vue :

<template>
  <div id="app">
    <v-popover>
      <button v-tooltip="'Hello'">Show Tooltip</button>
      <Tooltip slot="popover"/>
    </v-popover>
  </div>
</template>
<script>
import Tooltip from "@/components/Tooltip";
export default {
  name: "App",
  components: {
    Tooltip
  }
};
</script>

components/Tooltip.vue :

<template>
  <div class="hello">Hello</div>
</template>
<script>
export default {
  name: "Tooltip"
};
</script>

Мы просто помещаем наш пользовательский компонент Tooltip внутрь компонента v-popover.

Кроме того, мы можем указать объект в качестве значения директивы v-tooltip следующим образом:

App.vue :

<template>
  <div id="app">
    <button v-tooltip="{ content: 'Hello.', classes: ['a', 'b'] }">Show Tooltip</button>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
.a {
  color: white;
}
.b {
  background-color: black;
}
</style>

Затем мы должны увидеть всплывающую подсказку с белым текстом и черным фоном.

У него также есть много других вариантов, как показано на https://github.com/Akryum/v-tooltip#style-examples.

vue-директива-подсказка

vue-directive-tooltip - более простая всплывающая подсказка с меньшим количеством параметров. Он поставляется со стилями для создания всплывающей подсказки в качестве стиля по умолчанию.

Для его установки запускаем:

npm install vue-directive-tooltip --save

Тогда мы можем использовать его следующим образом:

main.js :

import Vue from "vue";
import App from "./App.vue";
import Tooltip from "vue-directive-tooltip";
import "vue-directive-tooltip/dist/vueDirectiveTooltip.css";
Vue.use(Tooltip);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <span v-tooltip="'Hello'">Tooltip</span>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Приведенный выше код создает всплывающую подсказку с директивой v-tooltip. Мы передаем в него строку как содержимое всплывающей подсказки.

У него есть несколько вариантов, включая position, delay, offset и модификаторы событий.

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

<template>
  <div id="app">
    <span v-tooltip.right="'Hello'">Tooltip</span>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Теперь всплывающая подсказка отображается справа вместо автоматического позиционирования.

delay можно передать как свойство объекта, который мы передаем в директиву v-tooltip. Например, мы можем отложить исчезновение всплывающей подсказки на секунду, написав:

<template>
  <div id="app">
    <span v-tooltip.right="{content:'hello', delay: 1000}">Tooltip</span>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

offset можно передать так же, как delay. Он перемещает всплывающую подсказку на количество пикселей, которое мы установили.

Мы можем отобразить всплывающую подсказку, щелкнув, наведя указатель мыши или сфокусировавшись. Например, мы можем написать:

<template>
  <div id="app">
    <span v-tooltip.click="'hello'">Tooltip</span>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Приведенный выше код запускает отображение всплывающей подсказки при нажатии, добавляя модификатор click.

Заключение

Мы можем использовать v-tooltip и vue-directive-tooltip для создания всплывающих подсказок, которые соответствуют нашим потребностям. Оба они позволяют создать обширный стиль. Кроме того, мы можем изменить поведение с помощью нескольких опций для каждой библиотеки.