还在因为用户多次点击而产生的bug而烦恼吗?上波节流!

45 阅读1分钟

在开发中经常会遇到因网速问题而导致接口反应慢,用户多次点击功能模块导致多次触发而产生的功能问题

而在vue框架中 我们可以创建自定义指令,就像 v-if @lick 这样快捷的方法

在main.js中 在我们使用组件时,都是将组件进行引入,挂载到vue的全局上来进行使用

同理,我们也能按照这个方法来创建一个方法

上流程:

首先创建一个js文件夹

image.png

在js中引入vue

image.png

然后创建一个vue自定义指令,这里的Vue.directive接受两个参数,第一个参数是自定义指令的名称,第二个是个对象,包含了自定义选项

而其中的inserted方法可以接收两个参数,第一个参数可以获取使用这个指令的dom对象,给元素添加点击事件,触发限制,这里限制的原理是利用了css中pointerEvents属性来限制当前dom元素无法和用户进行交互

image.png

inserted方法第二个参数可以接收自定义指令获取的值,可以用来给定时器设置停止交互的时长

image.png

最后将这个方法引入到main.js中就可以进行使用了

image.png