【vue 提交】当用户在3秒之内连续点击一个按钮，事件函数只执行一次，vue中防止用户频繁点击按钮，重复 flag。 vue事件修饰符 .once 点击事件将只会触发一次

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)
		}
	}
}