本篇文章为大家展示了Vue如何实现禁止短时间连续点击事件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法
<el-button @click="throttle()">测试</el-button>
export default {
data(){
return {
lastTime:0 //默认上一次点击时间为0
}
}
}methods:{
throttle(){
//获取当前时间的时间戳
let now = new Date().valueOf();
//第一次点击
if(this.lastTime == 0){
console.log('触发事件');
this.lastTime = now;
}else{
if((now-this.lastTime) > 2000){
//重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
this.lastTime = now;
console.log('间隔大于2秒，触发方法');
//添加自己要调用的方法
}else{
console.log('不触发');
}
}
},
}这种方法虽然很好，但是遇到请求超时的情况可能不是太好处理（网络原因、数据太大）。考虑通过后端是否返回res来控制。方法还有待提高！仅供参考~
补充知识：解决vuex中module过多时，需一个个引入的问题
在项目开发中，使用vuex，如果项目过大，vuex就需要模块化，但是如果module分的过多，我们就需要在store的index.js中一个个引入，这样未免太麻烦，所以webpack出来了个配置，可以解决这个问题，无需多次引入，懒癌患者福音，
以下是解决方案
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store配置了这个后就无需一个个引入模块了；
上述内容就是Vue如何实现禁止短时间连续点击事件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
