积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里，不积小流无以成江海。齐骥一跃，不能十步，驽马十驾，功不在舍。面对悬崖峭壁，一百年也看不出一条裂缝来，但用斧凿，能进一寸进一寸，能进一尺进一尺，不断积累，飞跃必来，突破随之。

目录

自定义

在src/directives下创建preventClick.js文件，写入以下内容：

export default {
    //自定义节流操作
    preventReClick: {
        mounted(el, binding) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value || 2000) //2000ms间隔时间
                }
            })
        }
    }
}

全局注册

import {createApp} from 'vue'
import App from './App.vue'
import preventClick from './directives/preventClick.js'; // 自定义防连点函数文件

const app = createApp(App)
app.mount('#app')
// 自定义指令prevent-click,使用时使用：v-prevent-click
app.directive("prevent-click", preventClick.preventReClick); 

使用

<template>
  <div>
    <span>index</span>
    <el-button v-prevent-click="5000" @click="show">click</el-button> <!-- 定义间隔5000ms -->
  </div>
</template>

<script>

export default {
  name: "index",
  data(){
    return{
    }
  },
  methods: {
    show() {
      console.log('点击')
    }
  }
}
</script>

<style scoped>

</style>