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

Vue-Lazyload

Потрясающий пакет с более чем 5000 звезд на Github. Vue-Lazyload от Hilongjw позволяет без проблем загружать изображения!

Пример кода

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

Репозиторий

Github

Vue-Infinite-Scroll

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

Метод, связанный с v-infinite-scroll, будет выполнен, когда нижняя часть элемента достигнет нижней части области просмотра. Круто, верно?

Пример кода

<template>
  /* your website code   */
  <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>

Репозиторий

Github

Vue-Focus

Иногда в веб-разработке сложно управлять фокусом ввода. Vue-Focus приходит на помощь и позволяет вам управлять фокусом непосредственно из модели вида.

Пример кода

<template>
  <button @click="focusedElement = true">Input gets Focus</button>
  <input type="text" v-focus="focusedElement">
</template>

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

Репозиторий

Github

Vue-Blur

Vue-Blur - отличный выбор, если вы хотите размывать определенные разделы вашего сайта, скажем, для незарегистрированных посетителей. Он также поставляется с опциями для настройки параметров, таких как непрозрачность, фильтр и переход между состояниями.

Пример кода

<template>
  /* Use this with a boolean value (true/false) */
  <div v-blur="isBlurred"></div>

  /* Use this with an object that uses values from the config */
  <div v-blur="blurConfig"></div>
</template>

<script>
  export default {
      data () {
        return {
          isBlurred: true, // activate and deactivate based on a boolean value

          blurConfig: {
            isBlurred: false, // activate and deactivate based on a boolean value and also provide a config
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

Репозиторий

Github

V-Clipboard

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

Пример кода

/* When an element that contains the v-clipboard directive is clicked, the value of valueToCopy will be copied into clipboard. */
<template>
  <button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>

<script>
export default {
  data() {
    return {
      valueToCopy: "Some Text"
    }
  }
};
</script>

Репозиторий

Github

Vue-ScrollTo

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

Пример кода

<template>
  <button v-scroll-to="'#element'">Scroll to #element as the target</button>

  <h1 id='element'>This will be the scrolling target</h1>
</template>

Репозиторий

Github

V-Hotkey

Эта классная пользовательская директива, созданная Dafrok, позволяет легко привязывать горячие клавиши к вашим компонентам. 

Пример кода

<template>
  <div v-hotkey="keymap" v-show="show">
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!{' '}
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    onShow () {
      this.show = true
    },
    onHide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.onHide,
          keyup: this.onShow
        }
      }
    }
  }
}
</script>

Репозиторий

Github

V-Click-Outside

Это директива, реагирующая на щелчок по элементам. Это удобно для закрытия диалогов, меню и т.д.

Пример кода

<template>
  <div v-show="show" v-click-outside="onClickOutside">
    Hide the element if a click event outside is triggered
  </div>
</template>

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

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

Репозиторий

Github

V-Scroll-Lock

Эта директива помогает вам предотвратить прокрутку вашего сайта, когда открыто что-то вроде модального / лайтбокса / всплывающего окна. Это особенно полезно при работе с несколькими устройствами!

Пример кода

<template>
  <div class="modal" v-if="open">
    <button @click="closeModal">X</button>
    <div class="modal-content" v-scroll-lock="open">
      <p>A bunch of scrollable modal content</p>
    </div>
  </div>
</template>


<script>
export default {
  name: 'Modal',
  data () {
    return {
      open: false
    }
  },
  methods: {
    openModal () {
      this.open = true
    },
    closeModal () {
      this.open = false
    }
  }
}
</script>

Репозиторий

Github

V-Tooltip

Этот пакет от Akryum предоставляет вам замечательные подсказки. Просто привяжите немного текста к v-подсказке, и все готово.

Пример кода

<template>
  <div>
    <p>
      <input v-model="message" placeholder="Message">
    </p>
    <p>
      <span v-tooltip="message">{{ message }}</span>
    </p>
  </div>
</template>

Репозиторий

Github

Ключ к выводу здесь заключается в том, что при работе с Vue.js вам не нужно каждый раз изобретать велосипед благодаря пользовательским директивам и замечательному сообществу.