Vue 前端框架中限制用户短时间内多次点击同一按钮的方法（例如：登录、注册）

一、首先在项目目录（自定义）下创建'controlClickState.js'文件，后在文件中定义如下内容：

// controlClickState.js 文件

export default {
  install(Vue) {
    // 禁止短时间内重复点击
    Vue.directive('preventClick', {
      inserted(button, bind) {
        button.addEventListener('click', () => {
          if (!button.disabled) {
            button.disabled = true;
            setTimeout(() => {
              but.disabled = false
            }, 6000)
          }
        })
      }
    })
  }
}

二、在项目目录下的 main.js 入口文件引用定义好的 'controlClickState.js'文件

import preventClick from '../static/js/controlClickState'
Vue.use(preventClick)

三、在需要限制点击频率的组件中使用

<button v-preventClick>登录</button>