一，自定义指令：

应用场景：禁用按钮多次点击

1.vue2

a. src/libs/preventClick.js

import Vue from 'vue'
const preventClick = Vue.directive('preventClick', {inserted: function (el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, 2000)}})}
});
export {preventClick 
}

b.src/main.js中:

import '@/libs/preventClick'

c.use

 <Button  @click="exported" v-preventClick>导出</Button>

2.Vue3

a.src/main.js中:

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)app.directive('preventClick', (el, binding) => {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, 2000)}})
})

b.use

 <Button   @click="exported" v-preventClick>导出</Button>

3.效果

简单使用，总结至此，欢迎各位工友交流学习。