解决用户快速点击，造成页面跳转或者请求接口等重复的问题。
1.在utils中新建一个throttle.js。
function throttle(methods, params) {
// methods是需要点击后需要执行的函数， info是点击需要传的参数
// params是执行函数需要传的参数
let that = this;
if (that.noClick && methods) {
that.noClick = false;
if (params) {
methods(params);
} else {
methods()
}
setTimeout(function () {
that.noClick = true;
}, 3000) //三秒内不能再次点击
} else {
console.log("重复点击，请稍后再试")
}
}
//noClick 是点击界面的data中添加的初始化是否可点击的状态
export default { throttle };2.在入口文件main.js中引入throttle.js。并全局注册。
import throttle from './utils/throttle.js'
Vue.config.productionTip = false
Vue.prototype.$throttle = throttle.throttle;3.在视图界面使用$throttle处理事件，在methods中正常写方法就行，但需要在事件帮方法的时候用$throttle处理。如：
<button @click="$throttle(moreClike,{type:'click',title:title})">多次点击无效</button>
data() {
return {
noClick:true,
title:'hello zxIt'
}
},
methods: {
moreClike(obj){ //因为封装时就是一个参数，所以当存在多个形参的情况，在传入实参时处理成对象即可
console.log(obj.type);
console.log(obj.title);
}
},版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66289.html
