vue官网

第一种方式:

<!-- 点击事件将只会触发一次 -->
<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)
		}
	}
}
Logo

前往低代码交流专区

更多推荐