vue中如何防止用户频繁点击按钮详解

目录

• 1、在项目中遇到一个问题：
• 2、解决办法
• 3、具体实现：
• 方法1步骤：
• 方法2：
• 方法三：
• 总结

1、在项目中遇到一个问题：

当事件中的代码执行耗费时间，且用户在短时间不断点击按钮，造成短时间多次触发了按钮的事件（不断向服务器发起请求）

2、解决办法

方法一： 定义一个变量（如：isLock）来控制按钮的disable属性，进而来防止用户短时间的多次点击按钮

方法二：全局定义一个指令，通过在按钮绑定指令来控制按钮被点击间隔时间

方法三：只可以点击一次。

3、具体实现：

方法1步骤：

① 首先设置变量isLock属性值为false,使得按钮可点击（disable: true）

② 当用户点击后，立即设置按钮不可点击（disable: false）

③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态

<el-button @click="clickBtn" :disable="isLock">按钮</el-button>
export default{
	data(){
		return {
			isLock: false, // 控制按钮的disable属性
		}
	},
	methods: {
		clickBtn(){
		 	// 设置按钮不可点击（disable: false）
			this.isLock = true
			// 执行耗时间的代码或事件请求等....
			
			// 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态
			setTimeout(() => {
				this.isLock = false
			}, 2000)
		}
	}
}

方法2：

① 首先创建一个指令文件中（如：directive.js文件）

② 在directive.js文件在创建一个全局的指令（如：preventReClick）

③ 在指令中根据按钮元素的disable状态值来设置被绑定按钮的状态（如，改变按钮的背景色和边框色）

④ 然后在入口文件main.js文件中引入指令

⑤ 在需要禁止重复点击的按钮上绑定指定

====== directive.js文件中 ====
import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick',{
	inserted: function(el, binding, vNode, oldVnode){
		el.addEventListener('click', () => {
			if(!el.disabled){
			    el.disabled = true
			    el.style.backgroundColor = '#ccc'
			    el.style.border = 'none'
       			setTimeout(() => {
          			el.disabled = false
          			 el.style.backgroundColor = '#1890ff'	
          			 el.style.border = '1px solid #1890ff'
        		}, 2000)
			}
		})
	}
})

export default {
	preventReClick 
}

====== 在main.js文件中引入指令 =====
import {preventReClick } from './directive/directive.js'
Vue.use(preventReClick )

接着在el-button中添加v-preventReClick，就可实现效果，在点击之后按钮变为禁用状态，持续禁用两秒,两秒之后便可再一次提交

	// 添加新属性
	<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>

方法三：

：click.once = 'orderEvaluste()'

a标签不可重复点击

定义一个点击事件，再点击后为其解绑就会只可点击一次

<a href="js" rel="external nofollow"  id="" onClick="buttonSubmit()">按钮</a>
<script>
	function buttonSumbit(){
		document.getElementById('buttonId').onclick = null//解绑onclick事件
		alert('接下来要执行的内容')
}
</script>

总结

到此这篇关于vue中如何防止用户频繁点击按钮的文章就介绍到这了,更多相关vue防止用户频繁点击内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！