About the author:
Li Zhongkai, 8 years front-end development, front-end principal, good at JavaScript/Vue.
Nuggets article column: KaysonLi’s personal home page – column – nuggets
Main share: vue.js, JavaScript, CSS
Inspired by AngularJS, Vue has some very useful built-in directives (such as V-html and V-once), each of which has its own purpose. The full list of instructions can be viewed here.
That’s not all. What’s even better is that you can develop custom instructions. The vue.js community has thus been able to solve numerous code problems by publishing the NPM package of custom directives.
Here is a list of my favorite vue.js custom directives. Needless to say, these instructions saved a lot of time for my project development! 😇
1. V-Hotkey
Warehouse address: github.com/Dafrok/v-ho… NPM install –save V-hotkey This command can bind one or more shortcut keys to components. Do you want to hide a component by pressing Escape and then holding down Control and Enter to show it? A piece of cake:
<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>Copy the code2. V-Click-Outside
Warehouse address: github.com/ndelvalle/v… Demo: codesandbox. IO/s/zx7mx8y1o… NPM install –save V-click-outside
Do you want to click on the outer area to turn off a component? This can be done easily with this directive. This is one of the commands I use for every project, and is especially useful in pop-ups and drop-down menu components.
<template>
<div
v-show="show"
v-click-outside="onClickOutside"
>
Hide me when a click outside this element happens
</div>
</template>
Copy the codeHTML
<script> export default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; }}}; </script>Copy the codeNote: you can also trigger by double-clicking the outer area, refer to the documentation for details.
3. V-Clipboard
Warehouse address: github.com/euvl/v-clip… NPM install –save V-clipboard
This simple instruction was written by Yev Vlasenko and can be applied to any static or dynamic element. When the element is clicked, the value of the instruction is copied to the clipboard. This is useful when users need to copy snippets of code.
<button v-clipboard="value">
Copy to clipboard
</button>Copy the codeHTML
4. Vue-ScrollTo
Warehouse address: github.com/rigor789/vu… NPM install –save vue-scrollto
This directive listens for the element’s click event and then scrolls to the specified position. I usually use it to handle article directory jumps and navigation jumps.
<span v-scroll to="{el: '#element', // container: '#element', // container: '#element', // container element duration: "> Scroll to #element by clicking here </span>Copy the codeNote: can also be set dynamically through the code, see the specific document.
5. Vue-Lazyload
Warehouse address: github.com/hilongjw/vu… Demo: hilongjw. Making. IO/vue – lazyloa… NPM install –save vue-lazyload
<img v-lazy="https://www.domain.com/image.jpg">Copy the code6. V-Tooltip
NPM install –save V-Tooltip Almost every project uses v-Tooltip. This directive adds responsive tooltips to elements and controls where they are displayed, how they are triggered, and how they listen for events.
<button v-tooltip="'You have ' + count + ' new messages.'">Copy the codeVue-directive-tooltip is also a popular tooltip plugin.
7. V-Scroll-Lock
Warehouse address: github.com/phegman/v-s… Demo: v-v-lock.peterhegman.com/ Install: NPM install –save V-scroll lock
Developed based on body-scroll-lock, this directive prevents the underlying elements from scrolling when the modal float is opened.
<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>
Copy the code<script>
export default {
data () {
return {
opened: false
}
},
methods: {
onOpenModal () {
this.opened = true
},
onCloseModal () {
this.opened = false
}
}
}
</script>Copy the code8. V-Money
Warehouse address: github.com/vuejs-tips/… NPM install — Save V-money If you need to add currency prefixes or suffixes, reserve decimal places, or set decimal symbols in the input field — keep the search, that’s it! One line of code addresses these requirements:
<template>
<div>
<input v-model.lazy="price" v-money="money" /> {{price}}
</div>
</template>Copy the code<script> export default {data () {return {price: 123.45, money: {decimal: ',', thousands: '.', prefix: '$ ', precision: 2, } } } } </script>Copy the code9. Vue-Infinite-Scroll
Warehouse address: github.com/ElemeFE/vue… NPM install –save vue-infinite scroll
Infinite scroll instruction that triggers a bound method when scrolling to the bottom of the page.
<template> <! -... --> <div v-infinite-scroll="onLoadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" ></div> <template>Copy the code<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>Copy the code10. Vue-Clampy
NPM install –save @clampy-js/ vue-Clampy
This command truncates the text in the element and adds an ellipsis to the end. It is implemented with Clampy.js.
<p v-clampy="3">Long text to clamp here</p> <! -- displays: Long text to... -->Copy the code11. Vue-InputMask
NPM install –save vue-inputMask This command automatically generates formatted text when you need to format the date in the input field. Based on Inputmask Library development.
<input type="text" v-mask="'99/99/9999'" />Copy the codeHTML
12. Vue-Ripple-Directive
NPM install –save VUe-ripple-directive
Aduardo Marcos wrote this directive to add ripple effects to clicked elements.
<div v-ripple class="button is-primary">This is a button</div>Copy the code13. Vue-Focus
NPM install –save vue-focus Sometimes, when the user is working in an interface, an input box needs to get focus. That’s what this instruction does.
<template>
<button @click="focused = true">Focus the input</button>
<input type="text" v-focus="focused">
</template>Copy the code<script> export default { data: function() { return { focused: false, }; }}; </script>Copy the code14. V-Blur
NPM install –save V-blur Let’s say you need to add semi-transparent masks to some parts of your page when visitors are not registered. This directive is easy to implement and allows you to customize transparency and transition effects.
<template> <button @click="blurConfig.isBlurred = ! blurConfig.isBlurred" >Toggle the content visibility</button> <p v-blur="blurConfig">Blurred content</p> </template>Copy the code<script> export default {data () {return blurConfig: {isBlurred: false, opacity: 0.3, filter: 'blur(1.px)', transition: 'all.3s linear'}}}}}; </script>Copy the code15. Vue-Dummy
NPM install –save vue-dummy Dummy dummy dummy dummy dummy dummy dummy dummy dummy dummy dummy This can be done easily with this directive.
<template> <! -- the content inside will have 150 words --> <p v-dummy="150"></p> <! -- Display a placeholder image of 400x300--> <img v-dummy="'400x300'" /> </template>Copy the codeThe last
Welcome to add more useful Vue custom instructions.
This article has been authorized by Li Zhongkai. If others are interested in reposting, please contact the author directly for authorization.
About the author:
Li Zhongkai, 8 years front-end development, front-end principal, good at JavaScript/Vue.
Nuggets article column: KaysonLi’s personal home page – column – nuggets
Main share: vue.js, JavaScript, CSS
For more learning materials, see here:
www.jnshu.com/login/1/368…