防止按钮重复点击指令

因为手快的同学,再进行按钮操作的时候,会触发多次,若这个点击事件接入API,就会重复请求API。所以为了防止这个问题,我不可能一个按钮去写一个防点击,这多麻烦。所以就写了个指令。下面上代码

export default {}.install = (Vue, options = {}) => {
  Vue.directive('dbClick', {
    inserted(el, binding) {
      el.addEventListener('click', e => {
        if (!el.disabled) {
          el.disabled = true
          el.style.cursor = 'not-allowed'
          setTimeout(() => {
            el.style.cursor = 'pointer'
            el.disabled = false
          }, 1500)
        }
      })
    }
  })
}

将这个文件引入到main.js之后就能全局用v-db-click的指令进行控制了,再也不用担心重复触发问题。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐