<template>
<button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
export default {
name: 'TestButton',
data: function () {
return {
isDisable: false
}
},
methods: {
submit() {
this.isDisable = true
setTimeout(() => {
this.isDisable = false
}, 1000)
}
},
}
</script>
说明一下:这个思路就是给button
加一个disabled
属性,这个属性是动态绑定的,在默认状态是false,当在点击事件的方法里时,先要this.isDisable = true
这样点击了就会防止连续点击,等接口走完了再设置this.isDisable = false
加一个时间函数,这样就可以解决连续点击了,这是一种方法其实还有其他的方法了,是全局设的方法,但我没用这个方法,后期有时间会补上的