vuebanner-Vue实现轮播图

在Vue,除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过(id,[definition])方式注册全局指令。然后在入口文件中进行()调用。

批量注册指令,新建directives/文件

在引入并调用

指令定义函数提供了几个钩子函数(可选):

下面分享几个实用的Vue自定义指令

需求:实现一键复制文本内容,用于鼠标右键粘贴。

思路:

使用:给Dom加上v-copy及复制的文本即可

需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件

思路:

使用:给Dom加上v-longpress及回调函数即可

背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。

需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。

思路:

使用:给Dom加上v-debounce及回调函数即可

背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。

我们常规方法是在每一个表单的on-change事件上做处理。

这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。

需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。

使用:将需要校验的输入框加上v-emoji即可

背景:在类电商类项目,往往存在大量的图片,如banner广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。

需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。

思路:

图片懒加载有两种方式可以实现,一是绑定srcoll事件进行监听,二是使用IntersectionObserver判断图片是否到了可视区域,但是有浏览器兼容性问题。

下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持IntersectionObserverAPI,如果支持就使用IntersectionObserver实现懒加载,否则则使用srcoll事件监听+节流的方法实现。

使用,将组件内标签的src换成v-LazyLoad

背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加v-if/v-show来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。

需求:自定义一个权限指令,对需要权限判断的Dom进行显示隐藏。

思路:

使用:给v-permission赋值判断即可

需求:给整个页面添加背景水印

思路:

使用,设置水印文案,颜色,字体大小即可

需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。

思路:

使用:在Dom上加上v-draggable即可