<template> <div v-if="opened"> <button @click="onCloseModal">X</button> <div 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
如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了，就是它！一行代码搞定这些需求：
<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
无限滚动指令，当滚动到页面底部时会触发绑定的方法。
<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'" />
12. Vue-Ripple-Directive
仓库地址: vue-ripple-directive
安装: npm install --save vue-ripple-directive
Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。
<div v-ripple>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 的时候，偶尔会需要使用假文本数据，或者特定尺寸的占位图片。用这个指令可以轻松实现。