模板网首页 > 建站教程 > vue教程,AngularJS教程 >  给element-ui的button加入防止重复点击的指令正文

给element-ui的button加入防止重复点击的指令

在做项目时,经常会遇到手快重复点击,重复发送请求的情况,这里是从网上找的一段代码,可以给element-ui的button加上防止重复点击的自定义指令,不用一个一个去写防止重复点击的方法,直接引入到main.js,然后在全局使用v-db-click就可以了:
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)
        }
      })
    }
  })
}

0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢