vue中如何防止用戶頻繁點(diǎn)擊按鈕詳解

更新時(shí)間：2022年09月23日 11:01:22 作者：powerful*！

在后臺(tái)使用過程中經(jīng)常會(huì)因?yàn)榘粹o重復(fù)點(diǎn)擊,而造成發(fā)送多次重復(fù)請(qǐng)求以下方法可以避免這種情況,下面這篇文章主要給大家介紹了關(guān)于vue中如何防止用戶頻繁點(diǎn)擊按鈕的相關(guān)資料,需要的朋友可以參考下

1、在項(xiàng)目中遇到一個(gè)問題：

當(dāng)事件中的代碼執(zhí)行耗費(fèi)時(shí)間，且用戶在短時(shí)間不斷點(diǎn)擊按鈕，造成短時(shí)間多次觸發(fā)了按鈕的事件（不斷向服務(wù)器發(fā)起請(qǐng)求）

2、解決辦法

方法一：定義一個(gè)變量（如：isLock）來(lái)控制按鈕的disable屬性，進(jìn)而來(lái)防止用戶短時(shí)間的多次點(diǎn)擊按鈕

方法二：全局定義一個(gè)指令，通過在按鈕綁定指令來(lái)控制按鈕被點(diǎn)擊間隔時(shí)間

方法三：只可以點(diǎn)擊一次。

3、具體實(shí)現(xiàn)：

方法1步驟：

① 首先設(shè)置變量isLock屬性值為false,使得按鈕可點(diǎn)擊（disable: true）

② 當(dāng)用戶點(diǎn)擊后，立即設(shè)置按鈕不可點(diǎn)擊（disable: false）

③ 等待事件執(zhí)行完或者相應(yīng)的間隔時(shí)間后，恢復(fù)按鈕為可點(diǎn)擊狀態(tài)

<el-button @click="clickBtn" :disable="isLock">按鈕</el-button>
export default{
	data(){
		return {
			isLock: false, // 控制按鈕的disable屬性
		}
	},
	methods: {
		clickBtn(){
		 	// 設(shè)置按鈕不可點(diǎn)擊（disable: false）
			this.isLock = true
			// 執(zhí)行耗時(shí)間的代碼或事件請(qǐng)求等....
			
			// 等待事件執(zhí)行完或者相應(yīng)的間隔時(shí)間后，恢復(fù)按鈕為可點(diǎn)擊狀態(tài)
			setTimeout(() => {
				this.isLock = false
			}, 2000)
		}
	}
}

方法2：

① 首先創(chuàng)建一個(gè)指令文件中（如：directive.js文件）

② 在directive.js文件在創(chuàng)建一個(gè)全局的指令（如：preventReClick）

③ 在指令中根據(jù)按鈕元素的disable狀態(tài)值來(lái)設(shè)置被綁定按鈕的狀態(tài)（如，改變按鈕的背景色和邊框色）

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

⑤ 在需要禁止重復(fù)點(diǎn)擊的按鈕上綁定指定

====== 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，就可實(shí)現(xiàn)效果，在點(diǎn)擊之后按鈕變?yōu)榻脿顟B(tài)，持續(xù)禁用兩秒,兩秒之后便可再一次提交

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

方法三：

：click.once = 'orderEvaluste()'

a標(biāo)簽不可重復(fù)點(diǎn)擊

定義一個(gè)點(diǎn)擊事件，再點(diǎn)擊后為其解綁就會(huì)只可點(diǎn)擊一次

<a href="js" rel="external nofollow"  id="" onClick="buttonSubmit()">按鈕</a>
<script>
	function buttonSumbit(){
		document.getElementById('buttonId').onclick = null//解綁onclick事件
		alert('接下來(lái)要執(zhí)行的內(nèi)容')
}
</script>