Vue中的全局指令防止按鈕重復(fù)點(diǎn)擊
更新時(shí)間：2022年08月15日 10:13:39 作者：吳小花的博客
這篇文章主要介紹了Vue中的全局指令防止按鈕重復(fù)點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
全局指令防止按鈕重復(fù)點(diǎn)擊
1.common.js
首先引入Vue
import Vue from 'vue';
const preventReClick = Vue.directive('preventReClick', {
? inserted: function (el, binding) {
? ? el.addEventListener('click', () => {
? ? ? if (!el.disabled) {
? ? ? ? el.disabled = true
? ? ? ? setTimeout(() => {
? ? ? ? ? el.disabled = false
? ? ? ? }, binding.value || 3000)
? ? ? }
? ? ? console.log(el.disabled)
? ? })
? }
});
?
export {
? preventReClick
}2.在需要引入的頁(yè)面引入（**.vue）
在按鈕上添加v-preventReClick
<el-button ?size="small" type="primary" @click="handleSave('form')" v-preventReClick>確定</el-button>從common.js導(dǎo)入指令preventReClick
import preventReClick from '../common' //防多次點(diǎn)擊，重復(fù)提交
防重復(fù)點(diǎn)擊(vue指令實(shí)現(xiàn))
阻止快速點(diǎn)擊按鈕會(huì)重復(fù)多次調(diào)用接口的
定義全局指令
// directive.js
export default {
? install (Vue) {
? ? // 防重復(fù)點(diǎn)擊(指令實(shí)現(xiàn))
? ? Vue.directive('repeatClick', {
? ? ? inserted (el, binding) {
? ? ? ? el.addEventListener('click', () => {
? ? ? ? ? if (!el.disabled) {
? ? ? ? ? ? el.disabled = true
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? el.disabled = false
? ? ? ? ? ? }, binding.value || 1000)
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? })
? }
}在main.js引用
import directive from 'directive.js'; vue.use(directive );
按鈕調(diào)用直接加v-preventReClick
<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3 onMounted異步函數(shù)同步請(qǐng)求async/await實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請(qǐng)求async/await實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
開(kāi)發(fā)一個(gè)封裝iframe的vue組件
這篇文章主要介紹了開(kāi)發(fā)一個(gè)封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項(xiàng)目使用CDN引入的配置與易出錯(cuò)點(diǎn)
在日常開(kāi)發(fā)過(guò)程中,為了減少最后打包出來(lái)的體積,我們會(huì)用到cdn引入一些比較大的庫(kù)來(lái)解決,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用CDN引入的配置與易出錯(cuò)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue中keep-alive的用法及問(wèn)題描述,本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue中如何去掉input前后的空格問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了Vue搭建Vuex環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過(guò)兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07