vue项目按钮添加防重复点击处理

按钮添加防重复点击

前端项目中，表单提交时，为了防止用户点击多次，一般都需要对按钮进行防重复点击处理。全局配置按钮节流指令 v-preventClick，实现防重复点击。

1、新建 plugin.js

const plugin = {
  install(Vue, options) {
    // 防止按钮重复点击，通过全局指令实现，按钮添加指令 v-preventClick
    Vue.directive('preventClick', {
      inserted(el, binding) {
        el.addEventListener('click', () => {
          if(!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 1500)
          }
        })
      }
    })
  }
}

export default plugin

2、main.js中引入封装插件plugin，并注册

import plugin from './utils/plugin.js'
Vue.use(plugin)

了解：vue 全局注册插件

Vue.use(plugin)

ue.use() 的作用是全局注册插件
如果插件是一个对象，必须提供 install 方法；如果插件是一个函数，会被作为install方法
install 的第一个参数是vue的实例
Vue.use() 需要在调用 new Vue() 之前被调用

插件功能范围

plugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源（指令/过滤器/过渡等）
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

了解： 自定义指令

自定义指令分类

私有自定义指令：组件中 directives 对象下注册的指令，只能在当前组件使用 (directives: { 指令名: {} })
全局自定义指令：main.js中 通过Vue.directive(指令名， 对象)声明的指令，全局可用

指令常用生命周期函数

bind：当指令绑定在标签上时触发的函数（此时标签还没有挂载到父元素上，DOM还未绘制）
inserted：当绑定指令的元素 插入到 父节点时触发的函数（可以获取父元素，操作父元素，DOM绘制完成）
update：页面数据更新时触发的函数

语法

私有自定义指令

directives: {
  color: {
    // el - 绑定的指令的 dom元素本身
    // binding - 指令的相关数据，可以随意命名，binding.value可以取到指令绑定的值
    bind(el, binding) {
      el.style.color = binding.value
    }
  }
}

// 指令使用：v-color="red"

全局自定义指令

Vue.directive('color', {
  bind(el, binding) {},
  inserted(el, binding) {}
})