uniApp 按钮内容为10秒内禁止点击,每秒数字减一,10后可以点击
时间: 2023-11-19 15:04:54 浏览: 142
你可以使用uniApp内置的计时器函数`setInterval()`来实现这个功能。具体实现步骤如下:
1. 在按钮点击事件中,先将按钮禁用。
2. 使用`setInterval()`函数开启一个1秒的计时器,并在计时器回调函数中更新按钮文字内容。
3. 当计时器计时到10秒后,关闭计时器,将按钮恢复可用状态。
下面是示例代码:
```javascript
<template>
<button @click="handleClick" :disabled="disabled">{{ buttonText }}</button>
</template>
<script>
export default {
data() {
return {
buttonText: '点击按钮',
disabled: false,
countDown: 10,
timer: null
}
},
methods: {
handleClick() {
this.disabled = true // 禁用按钮
this.timer = setInterval(() => {
this.countDown--
this.buttonText = `${this.countDown}秒后可点击`
if (this.countDown === 0) {
clearInterval(this.timer) // 关闭计时器
this.buttonText = '点击按钮'
this.disabled = false // 恢复按钮可用
this.countDown = 10 // 重置倒计时
}
}, 1000)
}
},
destroyed() {
clearInterval(this.timer) // 组件销毁时关闭计时器
}
}
</script>
```
在上面的示例代码中,我们使用了一个`countDown`变量来记录倒计时的数字,每秒减一。在计时器回调函数中,我们更新了按钮的文字内容,并在倒计时结束后恢复了按钮的可用状态。注意,在组件销毁时需要关闭计时器,避免内存泄漏。
阅读全文