Vue防止重复点击-自定义指令

el.disabled

• 在src/directives/目录下新建文件preventReClick.js文件

import Vue from 'vue'

// 防重复点击
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 1000)
      }
    })
  }
})

• 在src/main.js文件中引入

// 自定义指令
import './directives/preventReClick'

• 在组件中使用

<template>
  <div>
    <el-button type="primary" v-preventReClick="2000" @click="handleClick">测试</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

备注：

• 此方法是通过给被点击的DOM元素设置属性disabled=false实现的
• 在Nuxt.js中此方法测试不可用（虽然已经设置了el.target.disabled=true，绑定的click事件仍然可以执行）

el.style.pointerEvents

• 在src/directives/目录下新建文件preventReClick.js文件

import Vue from 'vue'

// 防重复点击
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.style.pointerEvents = 'none'
        setTimeout(() => {
          el.style.pointerEvents = 'auto'
        }, binding.value || 1000)
      }
    })
  }
})

• 在src/main.js文件中引入

// 自定义指令
import './directives/preventReClick'

• 在组件中使用

<template>
  <div>
    <el-button type="primary" v-preventReClick="2000" @click="handleClick">测试</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

指令表达式

• 在src/directives/目录下新建文件preventReClick.js文件

import Vue from 'vue'

// 防重复点击
Vue.directive('preventReClick', {
  inserted (el, binding) {
    const self = vnode.context
    el.addEventListener('click', () => {
      if (!self.isDisable) {
        /* 执行指令绑定的事件 */
        self[binding.expression]()
        self.isDisable = true
        setTimeout(() => {
          self.isDisable = false
        }, 2000)
      }
    })
  }
})

• 在src/main.js文件中引入

// 自定义指令
import './directives/preventReClick'

• 在组件中使用

<template>
  <div>
    <el-button type="primary" v-preventReClick="handleClick">测试</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>