15 обязательных директив Vue, которые значительно увеличат вашу производительность

Вдохновленный AngularJS, Vue поставляется со встроенными директивами (такими как v-html или v-once), которые вы найдете полезными, поскольку у каждого есть свой вариант использования. Вы можете найти полный список встроенных директив здесь.

Но что еще более фантастично, вы можете написать свои собственные директивы. Это позволило сообществу Vue.js решить бесчисленные проблемы с кодом, которые они могут затем опубликовать в виде пакетов.

В этом посте я хочу представить список моих любимых пользовательских директив Vue.js. Они многократно спасли меня на моих проектах. 😇

1. V-Hotkey

Репозитарий: v-hotkey
Демо: здесь
Установка: npm install --save v-hotkey

Эта директива позволит связать одну или несколько горячих клавиш с вашими компонентами. Если вдруг вам понадобиться скрыть компонент при нажатии клавиши Escape и отобразить его при нажатии Enter + Control? То с помощью этой директивы это будет просто сделать:

<template>
  <div
    v-show="show"
    v-hotkey="{
      'esc': onClose,
      'ctrl+enter': onShow
    }"
  >
   Press `esc` to close me!
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    },

    methods: {
        onClose() {
            this.show = false
        },

        onShow() {
            this.show = true
        },
    }
}
</script>

2. V-Click-Outside

Репозитарий: v-click-outside
Демо: здесь
Установка: npm install --save v-click-outside

Что если вам понадобиться закрыть компонент, при клике снаружи компонента? Это можно сделать в одно мгновение с помощью этой директивы. Это одна из тех директив, которые я использую в каждом из моих проектов. Она очень удобна при работе с всплывающими или выпадающими меню.

<template>
  <div
    v-show="show"
    v-click-outside="onClickOutside"
  >
    Hide me when a click outside this element happens
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },

  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};
</script>

Примечание. По умолчанию метод запускается при двойном клике снаружи. Обратитесь к документации, чтобы узнать больше об этой директиве.

3. V-Clipboard

Репозитарий: v-clipboard
Установка: npm install --save v-clipboard

Yev Vlasenko сделал эту простую директиву, которую вы можете добавить к любому статическому или динамическому элементу вашего кода. Затем при клике на элементе значение директивы будет скопировано в буфер обмена пользователя. Это может быть полезно, если нужно предоставить своим клиентам фрагмент кода, который они должны куда-то скопировать.

<button v-clipboard="value">
  Copy to clipboard
</button>

4. Vue-ScrollTo

Репозитарий: vue-scrollto
Демо: здесь
Установка: npm install --save vue-scrollto

Эта директива будет ожидать событие клика на элементе а затем прокручивать документ до заданного тега. Я в основном использую его при работе с оглавлением в статье или внутри заголовков навигации.

<span v-scroll-to="{
  el: '#element',          // The element you want to scroll to.
  container: '#container', // The container that has to be scrolled.
  duration: 500,           // The duration (in milliseconds) of the scrolling animation.
  easing: 'linear'         // The easing to be used when animating.
  }"
>
  Scroll to #element by clicking here
</span>

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

5. Vue-Lazyload

Репозитарий: vue-lazyload
Демо: здесь
Установка: npm install --save vue-lazyload

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

<img v-lazy="https://www.domain.com/image.jpg">

6. V-Tooltip

Репозитарий: v-tooltip
Демо: здесь
Установка: npm install --save v-tooltip

Почти каждый проект нуждается в подсказках tooltip. С помощью этого пакета вы можете добавлять подсказки к вашим элементам, контролировать их положение, выбирать их срабатывание по щелчку или при наведении курсора и ожидание событий.

<button v-tooltip="'You have ' + count + ' new messages.'">

Примечание. Существует другой популярный пакет для всплывающих подсказок, если вам нужна альтернатива, посмотрите vue-directive-tooltip.

7. V-Scroll-Lock

Репозитарий: v-scroll-lock
Демо: здесь
Установка: npm install --save v-scroll-lock

Основанная на пакете body-scroll-lock, эта директива поможет предотвратить прокрутку body, когда у вас открыто модальное окно.

<template>
  <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>
</template>

<script>
export default {
  data () {
    return {
      opened: false
    }
  },
  methods: {
    onOpenModal () {
      this.opened = true
    },

    onCloseModal () {
      this.opened = false
    }
  }
}
</script>

8. V-Money

Репозитарий: v-money
Демо: здесь
Установка: npm install --save v-money

Если вам нужно добавить префикс/суффикс к любой конкретной валюты, определить сколько десятичных разрядов должно быть, или использовать десятичный разделитель, такой как «,» — это директива то что нужно! Она сделает это за вас всего лишь с помощью простой строки.

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
      }
    }
  }
}
</script>

9. Vue-Infinite-Scroll

Репозитарий: vue-infinite-scroll
Установка: npm install --save vue-infinite-scroll

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

<template>
  <!-- ... -->
  <div
    v-infinite-scroll="onLoadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  ></div>
<template>


<script>
export default {
  data() {
    return {
      data [],
      busy: false,
      count: 0
    }
  },
 
  methods: {
    onLoadMore() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: this.count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

10. Vue-Clampy

Репозитарий: vue-clampy.
Установка: npm install --save @clampy-js/vue-clampy

Эта директива обрезает содержимое внутри элемента и добавляет многоточие в конец. За кулисами она использует fixy.js.

  <p v-clampy="3">Long text to clamp here</p>
  <!-- displays: Long text to...-->

11. Vue-InputMask

Репозитарий: vue-inputmask
Установка: npm install --save vue-inputmask

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

<input type="text" v-mask="'99/99/9999'" />

12. Vue-Ripple-Directive

Репозитарий: vue-ripple-directive
Установка: npm install --save vue-ripple-directive

Эта пользовательская директива Vue, предложенная Aduardo Marcos, предоставляет довольно аккуратную анимацию с волновым эффектом, которая срабатывает, когда люди нажимают на элемент. Я считаю, что она очень удобна для моих кнопок.

<div v-ripple class="button is-primary">This is a button</div>

13. Vue-Focus

Репозитарий: vue-focus
Установка: npm install --save vue-focus

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

<template>
  <button @click="focused = true">Focus the input</button>

  <input type="text" v-focus="focused">
</template>

<script>
export default {
  data: function() {
    return {
      focused: false,
    };
  },
};
</script>

14. V-Blur

Репозитарий: v-blur
Демо: здесь
Установка: npm install --save v-blur

Допустим, у вас есть какой-то раздел вашего приложения, который должен быть размыт, если посетитель к примеру не зарегистрирован. С помощью этой директивы вы можете сделать это мгновенно и настроить непрозрачность, фильтр размытия и переход между двумя состояниями.

<template>
  <button
    @click="blurConfig.isBlurred = !blurConfig.isBlurred"
  >Toggle the content visibility</button>

  <p v-blur="blurConfig">Blurred content</p>
</template>

<script>
  export default {
      data () {
        return           
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

15. Vue-Dummy

Репозитарий: vue-dummy
Демо: здесь
Установка: npm install --save vue-dummy

При разработке приложения в какой-то момент вам может потребоваться использовать фиктивный текст lorem ipsum или добавить изображения-заполнители определенного размера. Вы можете легко сделать это с помощью этой директивы.

<template>
  <!-- the content inside will have 150 words -->
  <p v-dummy="150"></p>

  <!-- Display a placeholder image of 400x300-->
  <img v-dummy="'400x300'" />
</template>

Заключение

Как вы думаете, есть другие директивы, которые заслуживают быть в этом списке? Не стесняйтесь сообщить мне в комментариях или обратиться ко мне в Twitter @RifkiNada.

Оригинальная статья Nada Rifki — 15 Must-Have Vue Directives That Will Significantly Maximize Your Productivity