js_脚本之家

使用场景:

受 AngularJS 的启发,Vue
内置了一些非常有用的指令,每个指令都有自身的用途。完整的指令列表可以在这里查看.

在Vue组件中点击某元素之外的地方移除该元素

这还没完,更棒的是可以开发自定义指令。Vue.js
社区因此得以通过发布自定义指令npm 包,解决了无数的代码问题。

需求:

以下就是我最喜欢的 Vue.js
自定义指令列表。不用说,这些指令为我的项目开发节省了大量时间!😇

如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们点击“下拉菜单”以外的区域隐藏下拉菜单。

1. V-Hotkey

解决方法一:

仓库地址: : 戳这里

出现“下拉菜单”的同时,建一个透明的遮罩层,然后只有“下拉菜单”可以点,点击遮罩层就隐藏。

安装: npm install --save v-hotkey

缺点:z-index层数要控制好,还有就是如果点击其他功能按钮,会失效,因为有遮罩层,导致要点击两次才有效。

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

解决方法二:

  Press `esc` to close me! export default { data() { return { show: true } }, methods: { onClose() { this.show = false }, onShow() { this.show = true }, }}

局部监听,给“列表组件”最外层的盒子加个点击事件,隐藏下拉菜单。并且对“下拉菜单”的事件要阻止事件冒泡。

js_脚本之家。2. V-Click-Outside

缺点:点击“列表组件”区域有效,点击“菜单组件”和“导航组件”区域无效。

仓库地址:

解决方法三:

Demo:

第一步:定义Vue全局点击函数

安装:npm install --save v-click-outside

// 定义全局点击函数Vue.prototype.globalClick = function  { document.getElementById.onclick = function ; };};

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

tips:

  Hide me when a click outside this element happens HTMLexport default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; } }};

1、参数为点击的回调函数。

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

2、Vue中通过getElementsByTagName获取不到body节点,还不知道是什么原因。

3. V-Clipboard

第二步:在组件中监听全局的点击事件

金沙网址,仓库地址:

mounted: function () { this.globalClick(this.moreSetupMenuRemove);}

安装: npm install --save v-clipboard

tips:mounted是Vue生命周期钩子中的DOM渲染完成阶段。

这个简单指令的作者是Yev Vlasenko
,可以用在任何静态或动态元素上。当元素被点击时,指令的值会被复制到剪贴板上。用户需要复制代码片段的时候,这个非常有用。

第三步:进行操作

 Copy to clipboard
// 移除操作moreSetupMenuRemove () { this.$refs.moreSetupMenu.style.display = 'none';},

4. Vue-ScrollTo

如果有更好的方法,欢迎交流!

仓库地址:

以上这篇在Vue组件中获取全局的点击事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

Demo:

安装: npm install --save vue-scrollto

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

 Scroll to #element by clicking here

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

5. Vue-Lazyload

仓库地址:

Demo:

安装: npm install --save vue-lazyload

图片懒加载,非常方便。

6. V-Tooltip

仓库地址: v-tooltip

Demo: available here

安装: npm install --save v-tooltip

几乎每个项目都会用到
tooltip。这个指令可以给元素添加响应式的tooltip,并可控制显示位置、触发方式和监听事件。

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

7. V-Scroll-Lock

仓库地址:

Demo:

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

基于 body-scroll-lock
开发,这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

  X  A bunch of scrollable modal content  

export default { data () { return { opened: false } }, methods: { onOpenModal () { this.opened = true }, onCloseModal () { this.opened = false } }}

8. V-Money

仓库地址:

Demo:

安装: npm install --save v-money

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

   {{price}} 

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

9. Vue-Infinite-Scroll

仓库地址:

安装: npm install --save vue-infinite-scroll

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

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); } }}

10. Vue-Clampy

仓库地址: vue-clampy.

安装: npm install --save @clampy-js/vue-clampy

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

 Long text to clamp here 

11. Vue-InputMask

仓库地址: vue-inputmask

安装: npm install --save vue-inputmask

当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask
library 开发。

12. Vue-Ripple-Directive

仓库地址: vue-ripple-directive

安装: npm install --save vue-ripple-directive

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

This is a button

13. Vue-Focus

仓库地址: vue-focus

安装: npm install --save vue-focus

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

 Focus the input 

export default { data: function() { return { focused: false, }; },};

14. V-Blur

仓库地址: v-blur

安装: npm install --save v-blur

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

 Toggle the content visibility Blurred content

 export default { data () { return blurConfig: { isBlurred: false, opacity: 0.3, filter: 'blur', transition: 'all .3s linear' } } } } };

15. Vue-Dummy

仓库地址:vue-dummy

Demo: available here

安装: npm install --save vue-dummy

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

总结

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注