vue自定义指令

1. 创建文件preventReClick.js

// 自定义指令防止按钮重复点击 v-preventReClick
export default {
    inserted(el, binding, vnode) {
    el.addEventListener('click', () => {
      // 是否可见
      if (!el.disabled) {
        el.disabled = true
        el.style.display = 'none'
        setTimeout(() => {
          el.disabled = false
          el.style.display = ''
        }, binding.value || 1500)
        // 不设置默认则为1500
      }
    })
  },
}

2. 同级下创建index.js

vue2 写法：

import preventReClick from './preventReClick'
 
const install = function(Vue) {
  Vue.directive('preventReClick', preventReClick)
}
 
if (window.Vue) {
  window['preventReClick'] = preventReClick
  Vue.use(install); // eslint-disable-line
}
 
export default install


vue3 写法：

import preventReClick from './preventReClick'
 
export default function directive(app){
  app.directive('preventReClick',preventReClick)
}

3. 在main.js引入index.js

vue2 写法：

import permission from './directive/permission/index.js'//你的文件路径
Vue.use(permission)

vue3 写法：

import directive from './directive' // directive
directive(app)

4. 使用在按钮上加入v-preventReClick="2000"

按钮