Одна из величайших особенностей Vue.js заключается в том, что он поставляется со встроенными директивами. Эти директивы значительно облегчают вам жизнь как разработчикам, но еще лучше то, что вы можете написать свои собственные пользовательские директивы.
Vue-Lazyload
Потрясающий пакет с более чем 5000 звезд на Github. Vue-Lazyload от Hilongjw позволяет без проблем загружать изображения!
Пример кода
<template>
<img v-lazy="https://www.example.com/example-image.jpg">
</template>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
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>
Репозиторий
V-Tooltip
Этот пакет от Akryum предоставляет вам замечательные подсказки. Просто привяжите немного текста к v-подсказке, и все готово.
Пример кода
<template>
<div>
<p>
<input v-model="message" placeholder="Message">
</p>
<p>
<span v-tooltip="message">{{ message }}</span>
</p>
</div>
</template>
Репозиторий
Ключ к выводу здесь заключается в том, что при работе с Vue.js вам не нужно каждый раз изобретать велосипед благодаря пользовательским директивам и замечательному сообществу.
0 комментариев
Добавить комментарий