VUE 自定义指令实现点击后禁用elementUI按钮前端vue.js

一、背景
要求点击完按钮后对按钮进行禁用，并在几秒后启用按钮点击
二、实现思路
对比各种实现代码量和使用便捷程度，选择封装公共指令，可以给按钮快捷添加这个功能
三、步骤
1、根据vue 文档定义一个空指令。

Vue.directive("preventClick", { inserted(el, binding, vnode) { } })

2、按钮添加点击事件，点击后禁用按钮

Vue.directive("preventClick", { inserted(el, binding, vnode) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true //禁用 el.classList.add(`is-disabled`); } }) } })

3、根据传值时间恢复点击

Vue.directive("preventClick", { inserted(el, binding, vnode) { const { value } = binding; if (value =https://www.it610.com/article/== false) { return; } el.addEventListener('click', () => { if (!el.disabled) { const defalutTime = (value || 5) - 0; //缺省默认禁用时间 el.disabled = true //禁用 el.classList.add(`is-disabled`); setTimeout(() => { //恢复按钮状态 el.classList.remove(`is-disabled`); el.disabled = false }, defalutTime * 1000) } }) } })

4、优化按钮增加剩余时间提示

Vue.directive("preventClick", { inserted(el, binding, vnode) { const { value } = binding; if (value =https://www.it610.com/article/== false) { return; } el.addEventListener('click', () => { if (!el.disabled) { const defalutTime = (value || 5) - 0; //缺省默认禁用时间 el.disabled = true //禁用 el.classList.add(`is-disabled`); let originalButton = el.innerHTML; let curTime = defalutTime; el.innerHTML = originalButton + `(${curTime})`; let timer = window.setInterval(() => { //更新时间状态 curTime--; if (curTime == 0) { window.clearInterval(timer); timer = null; } el.innerHTML = originalButton + `(${curTime})`; }, 1000) setTimeout(() => { //恢复按钮状态 el.classList.remove(`is-disabled`); el.disabled = false el.innerHTML = originalButton }, defalutTime * 1000) } }) } })

四、调用