指令方式

定义指令

• directive.js指令内容

const defaultTime = 500
/**
 * @description 防止短时间内快速点击, 默认值 500ms
 */
const fastClick = (el, binding) => {
  el.addEventListener('click', () => {
    let delayTime = parseInt(binding.value)
    delayTime = isNaN(delayTime) ? defaultTime : delayTime

    el.setAttribute('disabled', 'disabled')
    el.disabled = true
    let t = setTimeout(() => {
      clearTimeout(t)
      t = null
      el.disabled = false
      el.removeAttribute('disabled')
    }, delayTime) // 时间可以根据实际情况定
  })
}

export default {
  inserted(el, binding) {
    fastClick(el, binding)
  },
  updated(el, binding) {
    fastClick(el, binding)
  }
}

• install.js定义安装

import fastClick from './directive'
const install = function(Vue) {
  Vue.directive('fastClick', fastClick)
}

if (window.Vue) {
  window['fastClick'] = fastClick
  Vue.use(install); // eslint-disable-line
}

fastClick.install = install
export default fastClick

使用

main.js中引入

import fastClick from '@/directive/fast-click/index'
// 注册全局权限判断指令
Vue.use(fastClick)

在组件上使用

<el-button v-fast-click type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>