15 must-have директив Vue для підвищення продуктивності

8 хв. читання

Надихнувшись AngularJS, Vue пропонує власні вбудовані директиви (на зразок v-html чи v-once), які обов'язково стануть у пригоді при розробці. З повним переліком вбудованих директив можна ознайомитись за посиланням.

Ба більше, ви можете створити власні директиви. Спільнота Vue.js вже змогла розв'язати безліч проблем з користувацькими директивами. Можливо деякі зі створених пакетів допоможуть і вам.

Тож розглянемо 15 користувацьких директив Vue.js, які можуть значно зекономити ваш час.

1. V-Hotkey

Репозиторій: v-hotkey

Демонстрація:за посиланням

Встановлення: npm install --save v-hotkey

Директива дозволяє прив'язувати сполучення гарячих клавіш до компонентів. Хочете сховати компонент, натиснувши Escape, а повернути, натиснувши Ctrl+Enter? Легко!

<template>
  <div
    v-show="show"
    v-hotkey="{
      'esc': onClose,
      'ctrl+enter': onShow
    }"
  >
	  Натисніть `esc`, аби закрити мене!
  </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

Часто потрібно реалізовувати логіку, коли клік за межами компоненту його закриває. З директивою V-Click-Outside це робиться в одну мить. Особливо корисно при роботі зі спливними вікнами та випадним меню.

<template>
  <div
    v-show="show"
    v-click-outside="onClickOutside"
  >
    Сховайте мене при кліці поза елементом
  </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

Цю просту директиву ви можете додати до будь-якого статичного чи динамічного елемента вашого коду. Під час кліку на нього, значення, передане в директиву, буде скопійовано в буфер обміну користувача.

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

4. Vue-ScrollTo

Репозиторій: vue-scrollto

Демонстрація:за посиланням

Встановлення: npm install --save vue-scrollto

Директива буде очікувати подію кліка на елементі та скролити до заданого ідентифікатора. Основне застосування — робота зі змістом або заголовками навігації.

<span v-scroll-to="{
  el: '#element',          // Елемент, до якого ви хочете скролити
  container: '#container', // Контейнер з прокруткою 
  duration: 500,           // Тривалість (в мілісекундах) анімації прокрутки
  easing: 'linear'         // Затухання анімації
  }"
>
  Скролимо до #element, клікнувши тут
</span>

Зверніть увагу: щоб використовувати директиву програмно, зверніться до документації.

5. Vue-Lazyload

Репозиторій: vue-lazyload

Демонстрація:за посиланням

Встановлення: npm install --save vue-lazyload

Якщо ви хочете за 5 хвилин реалізувати відкладене завантаження зображень для пришвидшення сторінок, то ця директива стане вам у пригоді.

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

6. V-Tooltip

Репозиторій: v-tooltip

Демонстрація:за посиланням

Встановлення: npm install --save v-tooltip

Підказки будуть корисною фічею майже в кожному проєкті. З директивою V-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>Багато контенту, який прокручується</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

Коли вам треба додати позначку валюти перед чи після input, зверніться до цієї директиви. Ви просто визначаєте кількість десяткових знаків чи розділювач — і директива робить все за вас в один рядок.

<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

Ця директива корисна, якщо ви хочете підвантажувати нові елементи, коли користувач прокручує до кінця сторінки. Коротко кажучи, коли кінець елемента досягне кінцевої точки області видимості, викличеться метод bound.

<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

Директива дозволяє обрізати контент всередині елемента та додати крапки наприкінці. Під капотом використовується clampy.js.

 <p v-clampy="3">Long text to clamp here</p>
 <!-- виведе: 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

З цією директивою ви можете додати ефект пульсації під час кліку на елемент. Дуже зручно для кнопок, що обробляють певні дії.

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

13. Vue-Focus

Репозиторій: vue-focus

Встановлення: npm install --save vue-focus

Іноді необхідно зробити фокус для input, коли користувач взаємодіє з ним.

<template>
  <button @click="focused = true">Фокус для 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

Припустимо, є певна частина вашого застосунку, якій ви хочете додати ефект розмиття, якщо користувач не зареєстрований. З директивою V-Blur ви за мить налаштуєте прозорість, фільтр розмиття та перехід між двома станами.

<template>
  <button
    @click="blurConfig.isBlurred = !blurConfig.isBlurred"
  >Перемикаємо видимість контенту</button>

  <p v-blur="blurConfig">Розмитий контент</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 чи тимчасові зображення певного розміру. Vue-Dummy підбере весь контент за вас.

<template>
  <!-- наступний блок міститиме 150 слів -->
  <p v-dummy="150"></p>

  <!-- Розміщуємо зображення розміром 400x300-->
  <img v-dummy="'400x300'" />
</template>
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація