欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論