前端 |
您所在的位置：网站首页 › elbutton禁用请求数据回来不禁用 › 前端 |
|
一、背景 要求点击完按钮后对按钮进行禁用，并在几秒后启用按钮点击 二、实现思路对比各种实现代码量和使用便捷程度，选择封装公共指令，可以给按钮快捷添加这个功能 三、步骤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 === 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 === 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) } }) } })四、调用 导出 五、总结自定义指令写法代码量总体较少，而且使用方便，对原有逻辑入侵性较小 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |