1. V-Hotkey
倉庫地址: https://github.com/Dafrok/v-hotkey
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
倉庫地址: https://github.com/ndelvalle/v-click-outside
Demo: https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue
安裝: npm install --save v-click-outside
你想要點(diǎn)擊外部區(qū)域關(guān)掉某個組件嗎透且?用這個指令可以輕松實(shí)現(xiàn)。這是我每個項(xiàng)目必用的指令之一豁鲤,尤其在彈框和下拉菜單組件里非常好用秽誊。
<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>
說明: 你也可以通過雙擊外部區(qū)域來觸發(fā),具體用法請參考文檔琳骡。
3. V-Clipboard
倉庫地址: https://github.com/euvl/v-clipboard
安裝: npm install --save v-clipboard
這個簡單指令的作者是Yev Vlasenko 锅论,可以用在任何靜態(tài)或動態(tài)元素上。當(dāng)元素被點(diǎn)擊時楣号,指令的值會被復(fù)制到剪貼板上最易。用戶需要復(fù)制代碼片段的時候,這個非常有用炫狱。
<button v-clipboard="value">
Copy to clipboard
</button>
HTML
4. Vue-ScrollTo
倉庫地址: https://github.com/rigor789/vue-scrollTo
Demo: https://vue-scrollto.netlify.com/
安裝: npm install --save vue-scrollto
這個指令監(jiān)聽元素的點(diǎn)擊事件藻懒,然后滾動到指定位置。我通常用來處理文章目錄跳轉(zhuǎn)和導(dǎo)航跳轉(zhuǎn)视译。
<span v-scroll-to="{
el: '#element', // 滾動的目標(biāo)位置元素
container: '#container', // 可滾動的容器元素
duration: 500, // 滾動動效持續(xù)時長(毫秒)
easing: 'linear' // 動畫曲線
}"
>
Scroll to #element by clicking here
</span>
說明: 也可以通過代碼動態(tài)設(shè)置嬉荆,具體看文檔。
5. Vue-Lazyload
倉庫地址: https://github.com/hilongjw/vue-lazyload
Demo: http://hilongjw.github.io/vue-lazyload/
安裝: 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
幾乎每個項(xiàng)目都會用到 tooltip。這個指令可以給元素添加響應(yīng)式的tooltip椅亚,并可控制顯示位置限番、觸發(fā)方式和監(jiān)聽事件。
<button v-tooltip="'You have ' + count + ' new messages.'">
說明: 還有一個比較流行的tooltip插件vue-directive-tooltip.
7. V-Scroll-Lock
倉庫地址: https://github.com/phegman/v-scroll-lock
Demo: https://v-scroll-lock.peterhegman.com/
安裝: npm install --save v-scroll-lock
基于 body-scroll-lock 開發(fā)呀舔,這個指令的作用是在打開模態(tài)浮層的時候防止下層的元素滾動弥虐。
<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
倉庫地址: https://github.com/vuejs-tips/v-money
Demo: https://vuejs-tips.github.io/v-money/
安裝: npm install --save v-money
如果你需要在輸入框里加上貨幣前綴或后綴、保留小數(shù)點(diǎn)位數(shù)或者設(shè)置小數(shù)點(diǎn)符號——不用找了媚赖,就是它霜瘪!一行代碼搞定這些需求:
<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
倉庫地址: https://github.com/ElemeFE/vue-infinite-scroll
安裝: npm install --save vue-infinite-scroll
無限滾動指令,當(dāng)滾動到頁面底部時會觸發(fā)綁定的方法省古。
<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實(shí)現(xiàn)的豺妓。
<p v-clampy="3">Long text to clamp here</p>
<!-- displays: Long text to...-->
11. Vue-InputMask
倉庫地址: vue-inputmask
安裝: npm install --save vue-inputmask
當(dāng)你需要在輸入框里格式化日期時惜互,這個指令會自動生成格式化文本布讹。基于Inputmask library 開發(fā)训堆。
<input type="text" v-mask="'99/99/9999'" />
HTML
12. Vue-Ripple-Directive
倉庫地址: vue-ripple-directive
安裝: npm install --save vue-ripple-directive
Aduardo Marcos 寫的這個指令可以給點(diǎn)擊的元素添加波紋動效描验。
<div v-ripple class="button is-primary">This is a button</div>
13. Vue-Focus
倉庫地址: vue-focus
安裝: npm install --save vue-focus
有時候,用戶在界面里操作坑鱼,需要讓某個輸入框獲得焦點(diǎn)膘流。這個指令就是干這個的。
<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
假設(shè)你的頁面在訪客沒有注冊的時候鲁沥,有些部分需要加上半透明遮罩呼股。用這個指令可以輕松實(shí)現(xiàn),還可以自定義透明度和過渡效果画恰。
<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
開發(fā) app 的時候彭谁,偶爾會需要使用假文本數(shù)據(jù),或者特定尺寸的占位圖片允扇。用這個指令可以輕松實(shí)現(xiàn)缠局。
<template>
<!-- the content inside will have 150 words -->
<p v-dummy="150"></p>
<!-- Display a placeholder image of 400x300-->
<img v-dummy="'400x300'" />
</template>