Vue3中使用自定义指令

一，自定义指令：

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

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 = true
        setTimeout(() => {
          el.disabled = false
        }, 2000)
      }
    })
  }
});
export {
  preventClick 
}

b.src/main.js中:

import '@/libs/preventClick'

c.use

 导出

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 = true
            setTimeout(() => {
              el.disabled = false
            }, 2000)
          }
        })
})

b.use

 导出

3.效果

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