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>
    <button v-tooltip="`You have ${count} new messages.`">Hover</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 100
    };
  }
};
</script>
<style>
div {
  text-align: center;
}
</style>

В приведенном выше коде мы просто добавили пакет VTooltip, а затем включили v-tooltip в наш шаблон. Затем мы увидим заданное нами сообщение, которое будет отображаться при наведении курсора на кнопку Hover.

Мы можем изменить положение всплывающей подсказки. Доступны следующие позиции:

  • 'auto'
  • 'auto-start'
  • 'auto-end'
  • 'top'
  • 'top-start'
  • 'top-end'
  • 'right'
  • 'right-start'
  • 'right-end'
  • 'bottom'
  • 'bottom-start'
  • 'bottom-end'
  • 'left'
  • 'left-start'
  • 'left-end'

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

<button v-tooltip.right="`You have ${count} new messages.`">Hover</button>

Затем справа отобразится всплывающая подсказка.

CSS классы

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

<template>
  <div>
    <button
      v-tooltip.right="{content: `You have ${count} new messages.`, classes: ['foo', 'bar'] }"
    >Hover</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 100
    };
  }
};
</script>
<style>
div {
  text-align: center;
}
.foo {
  color: white;
}
.bar {
  background: green;
}
</style>

В приведенном выше коде у нас есть классы foo и bar, которые мы включили в нашу всплывающую подсказку через свойство classes в объекте, который мы передали в директиву v-tooltip.

Текстовое содержимое теперь находится в значении свойства content.

Мы также можем загружать контент асинхронно. Например, мы можем написать:

<template>
  <div>
    <button v-tooltip.right="{content: asyncMsg }">Hover</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 100
    };
  },
  methods: {
    asyncMsg() {
      return Promise.resolve(`You have ${this.count} new messages.`);
    }
  }
};
</script>
<style>
div {
  text-align: center;
}
</style>

В приведенном выше коде у нас есть метод asyncMsg, который возвращает обещание. Затем мы ссылаемся на него в content, не вызывая его.

Другие варианты перечислены на https://github.com/Akryum/v-tooltip. Эта всплывающая подсказка очень настраиваема.

V-Scroll-Lock

Пакет v-scroll-lock помогает предотвратить прокрутку тела при открытом модальном окне.

Мы можем установить его, запустив:

npm install --save v-scroll-lock

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

main.js :

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

App.vue :

<template>
  <div>
    <button @click="opened = true">Open</button>
    <div class="modal" v-if="opened">
      <button @click="onCloseModal">X</button>
      <div class="modal-content" v-scroll-lock="opened">
        <p>A bunch of scrollable modal content</p>
      </div>
    </div>
    <p v-for="n in nums" :key="n">{{n}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      opened: false,
      nums: new Array(100).fill(0).map((_, i) => i)
    };
  },
  methods: {
    onCloseModal() {
      this.opened = false;
    }
  }
};
</script>
<style>
.modal {
  position: absolute;
  background: white;
  z-index: 1000;
}
</style>

В приведенном выше коде у нас есть прокручиваемый контент, отображаемый v-for. Затем мы определили модальное окно с включенной директивой v-scroll-lock. Мы устанавливаем значение v-scroll-lock на opened, чтобы мы могли отключить прокрутку при открытии добавленного нами модального окна.

Кроме того, мы добавили несколько стилей в модальный класс, чтобы он отображался над отображаемыми числами.

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

Заключение

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

Пакет v-scroll-lock позволяет предотвратить прокрутку при открытом модальном окне. Нам просто нужно добавить директиву, а затем установить условие для отключения прокрутки.