vue指令防止短时间连续点击

perventReClick.js

JAVASCRIPT
import Vue from 'vue' const disClass = 'preventRe-disabled' const disStyle = document.createElement('style') disStyle.innerHTML = `.${disClass}{filter: grayscale(70%) opacity(0.7);cursor: not-allowed !important;}` document.head.appendChild(disStyle) Vue.directive('preventReClick', { inserted: function (el, binding) { let timer = null el.addEventListener('click', () => { if (!el.classList.contains(disClass)) { binding.value() } el.classList.add(disClass) clearTimeout(timer) timer = setTimeout(() => { el.classList.remove(disClass) clearTimeout(timer) }, binding.arg || 1000) }) } });

使用方法

    1. main.js添加些句 import './plugins/perventReClick'
    1. 按钮点击事件改成 v-preventReClick="add"

ps: <el-button @click="add">新增</el-button> ==> <el-button v-preventReClick:2000="add">新增</el-button>

【END】

本文链接:

版权声明:本blog所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 简单才是真

阅读 112 | 发布于 2022-08-19
暂无评论