【vue 提交】当用户在3秒之内连续点击一个按钮,事件函数只执行一次,vue中防止用户频繁点击按钮,重复 flag。 vue事件修饰符 .once 点击事件将只会触发一次
① 首先设置变量flag属性值为false,使得按钮可点击(disabled: true)② 当用户点击后,立即设置flag为false,事件逻辑return,不继续执行。③ 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态,flag为true。② 当用户点击后,立即设置按钮不可点击(disabled: false)① 首先设置变量flag属性值为true,使得点击事件可点击。③ 等待事件
·
第一种方式:
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="zixunFun"></a>
<view class="btn" @click.once="zixunFun">发起咨询</view>
第二种方式:
具体实现步骤:
① 首先设置变量flag属性值为true,使得点击事件可点击
② 当用户点击后,立即设置flag为false,事件逻辑return,不继续执行
③ 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态,flag为true
<script>
export default {
data() {
return {
flag: true, // 声明一个值,值为true,默认第一次点击 触发
}
},
methods: {
// 连续点击事件
clickFun(){
if (!this.flag) return // 第一次点击3s内,flag为false 不触发逻辑
this.flag = false; // 3s 过后,flag 为true 可以继续执行后,接着再次把flag 改为 false
/*
执行耗时间的代码或事件请求等....
*/
// 等待事件执行完或者相应的间隔时间后,this.flag为true 恢复为可点击状态
setTimeout(() => {
this.flag = true
}, 3000) // 等待3s再转为 true,可点击
}
}
}
</script>
如果是 button
实现步骤:
① 首先设置变量flag属性值为false,使得按钮可点击(disabled: true)
② 当用户点击后,立即设置按钮不可点击(disabled: false)
③ 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态
<el-button @click="clickFun" :disabled="flag">按钮</el-button>
export default{
data(){
return {
flag: false, // 控制按钮的disabled属性
}
},
methods: {
clickFun(){
// 设置按钮不可点击(disable: false)
this.flag = true
// 执行耗时间的代码或事件请求等....
// 等待事件执行完或者相应的间隔时间后,恢复按钮为可点击状态
setTimeout(() => {
this.flag = false
}, 3000)
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)