1. V-Hotkey
倉庫地址: github.com/Dafrok/v-ho… Demo: 戳這里 https://dafrok.github.io/v-hotkey 安裝: npm install --save v-hotkey
這個指令可以給組件綁定一個或多個快捷鍵。你想要通過按下 Escape 鍵后隱藏某個組件，按住 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
倉庫地址: github.com/ndelvalle/v… Demo: codesandbox.io/s/zx7mx8y1o… 安裝: 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> html
<script> export default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; } } }; </script> 說明： 你也可以通過雙擊外部區域來觸發，具體用法請參考文檔。
3. V-Clipboard
倉庫地址: github.com/euvl/v-clip… 安裝: npm install --save v-clipboard
這個簡單指令的作者是Yev Vlasenko ，可以用在任何靜態或動態元素上。當元素被點擊時，指令的值會被復制到剪貼板上。用戶需要復制代碼片段的時候，這個非常有用。
<button v-clipboard="value"> Copy to clipboard </button>
4. vue-ScrollTo
倉庫地址: github.com/rigor789/vu… Demo: vue-scrollto.netlify.com/ 安裝: npm install --save vue-scrollto
這個指令監聽元素的點擊事件，然后滾動到指定位置。我通常用來處理文章目錄跳轉和導航跳轉。
<span v-scroll-to="{ el: '#element', // 滾動的目標位置元素 container: '#container', // 可滾動的容器元素 duration: 500, // 滾動動效持續時長（毫秒） easing: 'linear' // 動畫曲線 }" > Scroll to #element by clicking here </span> 說明： 也可以通過代碼動態設置，具體看文檔。
5. Vue-Lazyload
倉庫地址: github.com/hilongjw/vu… Demo: hilongjw.github.io/vue-lazyloa… 安裝: npm install --save vue-lazyload 圖片懶加載，非常方便。
<img v-lazy="https://www.domain.com/image.jpg">6. V-Tooltip
倉庫地址: v-tooltip Demo: available here 安裝: npm install --save v-tooltip 幾乎每個項目都會用到 tooltip。這個指令可以給元素添加響應式的tooltip，並可控制顯示位置、觸發方式和監聽事件。
<button v-tooltip="'You have ' + count + ' new messages.'"> 說明： 還有一個比較流行的tooltip插件vue-directive-tooltip.
7. V-Scroll-Lock
倉庫地址: github.com/phegman/v-s… Demo: v-scroll-lock.peterhegman.com/ 安裝: npm install --save v-scroll-lock
基於 body-scroll-lock 開發，這個指令的作用是在打開模態浮層的時候防止下層的元素滾動。
<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
倉庫地址: github.com/vuejs-tips/… Demo: vuejs-tips.github.io/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
倉庫地址: github.com/ElemeFE/vue… 安裝: 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
這個指令會截斷元素里的文本，並在末尾加上省略號。它是用clampy.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 當你需要在輸入框里格式化日期時，這個指令會自動生成格式化文本。基於Inputmask library 開發。
<input type="text" v-mask="'99/99/9999'" /> 佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜索大全https://55wd.com
12. Vue-Ripple-Directive
倉庫地址: vue-ripple-directive 安裝: npm install --save vue-ripple-directive
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 Demo: 戳這里 安裝: 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 Demo: available here 安裝: npm install --save vue-dummy 開發 app 的時候，偶爾會需要使用假文本數據，或者特定尺寸的占位圖片。用這個指令可以輕松實現。
<template> <!-- the content inside will have 150 words --> <p v-dummy="150"></p> <!-- Display a placeholder image of 400x300--> <img v-dummy="'400x300'" /> </template>