这15个Vue指令,让你的项目开发爽到爆_vue.js_脚本之

来源:http://www.chinese-glasses.com 作者:Web前端 人气:54 发布时间:2020-03-16
摘要:仓库地址 :github.com/euvl/v-clip… 安装 :npm install --savev-clipboard 11. Vue-InputMask button v-tooltip="'You have ' + count + ' new messages.'" 假设你的页面在访客没有注册的时候,有些部分需要加上半透明遮罩

仓库地址:github.com/euvl/v-clip…安装:npm install --save v-clipboard

11. Vue-InputMask

button v-tooltip="'You have ' + count + ' new messages.'"

假设你的页面在访客没有注册的时候,有些部分需要加上半透明遮罩。用这个指令可以轻松实现,还可以自定义透明度和过渡效果。

这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟:

有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。

仓库地址:vue-focus安装:npm install --save vue-focus有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。

4. Vue-ScrollTo

  1. V-Scroll-Lock

仓库地址:vue-dummy

  1. Vue-Infinite-Scroll

安装: npm install --save vue-lazyload

仓库地址:vue-inputmask安装:npm install --save vue-inputmask当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask library开发。

Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。

  1. Vue-Clampy

安装: npm install --save vue-scrollto

input type="text" v-mask="'99/99/9999'" /

7. V-Scroll-Lock

scriptexport default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; } }};/script

这个指令监听元素的点击事件,然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。

template button @click="focused = true"Focus the input/button input type="text" v-focus="focused"/template

scriptexport default { data: function() { return { focused: false, }; },};/script

1. V-Hotkey

template !-- the content inside will have 150 words -- p v-dummy="150"/p !-- Display a placeholder image of 400x300-- img v-dummy="'400x300'" //template

总结

说明:你也可以通过双击外部区域来触发,具体用法请参考文档。

仓库地址: vue-ripple-directive

仓库地址:github.com/rigor789/vu…Demo:vue-scrollto.netlify.com/安装:npm install --save vue-scrollto

说明: 你也可以通过双击外部区域来触发,具体用法请参考文档。

这个指令会截断元素里的文本,并在末尾加上省略号。它是用clampy.js实现的。

14. V-Blur

button v-clipboard="value" Copy to clipboard/button

6. V-Tooltip

HTML

仓库地址: vue-clampy.

  1. Vue-Lazyload

如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是它!一行代码搞定这些需求:

仓库地址:github.com/phegman/v-s…Demo:v-scroll-lock.peterhegman.com/安装:npm install --save v-scroll-lock

安装: npm install --save vue-dummy

template div v-show="show" v-hotkey="{ 'esc': onClose, 'ctrl+enter': onShow }"  Press `esc` to close me! /div/templatescriptexport default { data() { return { show: true } }, methods: { onClose() { this.show = false }, onShow() { this.show = true }, }}/script

开发 app 的时候,偶尔会需要使用假文本数据,或者特定尺寸的占位图片。用这个指令可以轻松实现。

仓库地址:v-tooltipDemo:available here安装:npm install --save v-tooltip几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip,并可控制显示位置、触发方式和监听事件。

这个指令会截断元素里的文本,并在末尾加上省略号。它是用clampy.js实现的。

span v-scroll-to="{ el: '#element', // 滚动的目标位置元素 container: '#container', // 可滚动的容器元素 duration: 500, // 滚动动效持续时长(毫秒) easing: 'linear' // 动画曲线 }" Scroll to #element by clicking here/span

Demo: https://v-scroll-lock.peterhegman.com/

仓库地址:vue-ripple-directive安装:npm install --save vue-ripple-directive

9. Vue-Infinite-Scroll

  1. V-Blur

Demo: https://vuejs-tips.github.io/v-money/

无限滚动指令,当滚动到页面底部时会触发绑定的方法。

仓库地址: https://github.com/vuejs-tips/v-money

仓库地址:vue-dummyDemo:available here安装:npm install --save vue-dummy开发 app 的时候,偶尔会需要使用假文本数据,或者特定尺寸的占位图片。用这个指令可以轻松实现。

8. V-Money

10bet,时间: 2019-11-16阅读: 422标签: 指令1. V-Hotkey

说明: 也可以通过代码动态设置,具体看文档。

仓库地址:vue-clampy.安装:npm install --save @clampy-js/vue-clampy

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

作者:KaysonLi链接:来源:掘金

仓库地址: v-blur

  1. V-Click-Outside

Demo: available here

  1. V-Clipboard

安装: npm install --save v-scroll-lock

说明:还有一个比较流行的tooltip插件vue-directive-tooltip.

 Focus the input 

export default { data: function() { return { focused: false, }; },};
  1. Vue-Focus

你想要点击外部区域关掉某个组件吗?用这个指令可以轻松实现。这是我每个项目必用的指令之一,尤其在弹框和下拉菜单组件里非常好用。

  1. Vue-InputMask

仓库地址: https://github.com/hilongjw/vue-lazyload

仓库地址:github.com/vuejs-tips/…Demo:vuejs-tips.github.io/v-money/安装:npm install --save v-money如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是它!一行代码搞定这些需求:

图片懒加载,非常方便。

仓库地址:github.com/hilongjw/vu…Demo:hilongjw.github.io/vue-lazyloa…安装:npm install --save vue-lazyload图片懒加载,非常方便。

欢迎补充更多好用的 Vue 自定义指令。

template div input v-model.lazy="price" v-money="money" / {{price}} /div/template

scriptexport default { data () { return { price: 123.45, money: { decimal: ',', thousands: '.', prefix: '$ ', precision: 2, } } }}/script

Demo: https://vue-scrollto.netlify.com/

Aduardo Marcos写的这个指令可以给点击的元素添加波纹动效。

 Scroll to #element by clicking here
  1. Vue-ScrollTo
This is a button
template !-- ... -- div v-infinite-scroll="onLoadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" /divtemplate

scriptexport 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.js 自定义指令列表。不用说,这些指令为我的项目开发节省了大量时间!

本文由10bet发布于Web前端,转载请注明出处:这15个Vue指令,让你的项目开发爽到爆_vue.js_脚本之

关键词:

上一篇:NodeJS入门一

下一篇:没有了

最火资讯