个人网站做哪些流程,相机网站建设策划书,企业网站,js 网站简体繁体前言 我们经常在移动端会处理按钮和输入框的防抖和节流处理#xff0c;在pc端很少进行这样的操作 但是在pc端也是可以进行按钮的防抖操作#xff0c;这样也是比较合理#xff0c;可以不用但不可以不会 我们只要配合vue项目自定义指令加上全局注册#xff0c;就可以实现按…前言 我们经常在移动端会处理按钮和输入框的防抖和节流处理在pc端很少进行这样的操作 但是在pc端也是可以进行按钮的防抖操作这样也是比较合理可以不用但不可以不会 我们只要配合vue项目自定义指令加上全局注册就可以实现按钮的防抖操作。 并且这种方式是在做加法把自定义指令全局注册之后只需要把click换成v-antishake自定义指令即可
项目自定义指定-全局注册包结构 代码实现-项目有自定义指令
1.在src/directive/module下建立antishake.js文件-代码如下
export default {inserted (el, binding, vnode) {let timer {}el.addEventListener(click, () {if (timer) {clearTimeout(timer)}timer setTimeout(() {binding.value()}, 2000)})}
}
2.在src/directive/index.js下注册
// 按钮防抖处理
import antishake from ./module/antishake
const install function (Vue) {// 按钮防抖处理Vue.directive(antishake, antishake)
}
export default install 3.在页面需要按钮防抖的地方直接使用自定义指令代替click
// 原来点击事件
click事件
// 现在点击事件-防抖处理-自定义点击事件v-antishake事件 总结
经过这一趟流程下来相信你也对 vue-pc端实现按钮防抖处理-自定义指令 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
