vue自定义指令--- 按钮防止重复点击

文件地址：views/utils/preventReClick.js

export default {

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

            }
        })
    }
}

main.js文件

import preventReClick from '@/utils/preventRepeatClick.js'
Vue.use(preventReClick)

使用

<el-button @click="search" type="primary" v-preventReClick="2000">搜索</el-button>
<el-button @click="toAdd" type="primary" v-preventReClick>查询</el-button>

注：可以传参2000，表示在2000毫秒内点击无效，不传参表示默认1000毫秒内点击无效，就是一个节流的效果，在一定的时间内点击按钮只执行一次