vue 指定时间内按钮点击次数限制（解决a标签不能使用disabled属性问题）

vue 指定时间内按钮点击次数限制

（解决a标签不能使用disabled属性问题）

说明

为实现控制按钮点击次数，需要使用setTimeout函数，其次因为是在这里的背景是在vue项目之中，直接使用vue的自定义属性的方法；如果是在jquery项目中，也可以使用该方法，只是配置方法需要改动下

步骤

1、定义一个js，用于定义自定义属性及其点击次数控制方法
注：
1)因为a标签中没有disabled属性，所以使用disabled来控制会不生效，所以这里替换成了使用pointer-events属性，它的作用是让元素的点击事件失效；如果无需在a标签上使用，建议用disabled属性
2)这里定义的onceClick就是自定义的属性名，采用驼峰命名法，使用属性名时将驼峰转换为中划线，并加上v，如“v-once-click”

export default {
    install (Vue) {
      // 防止重复点击 在前端元素中添加 v-prevent-click属性
      Vue.directive('onceClick', {
        inserted (el, binding) {
          el.addEventListener('click', () => { 
            if (el.style.pointerEvents === '') { 
             // el.disabled = true; 
              el.style.pointerEvents = 'none';   // 防止a标签
              setTimeout(() => {  
                el.style.pointerEvents = '';
                //el.disabled = false;
                // 这里设置的3秒不可重复点击
              }, 3000);
            }
          })
        }
      })
    }
  }

2、在main.js中声明

import onceClick from './services/ClickOnce.js'
Vue.use(onceClick)

3、在具体元素中部署
只需要添加上‘v-once-click’属性即可

<el-link  
          :underline="false"
          @click="save" 
          v-once-click
          ><i class="el-icon-document-checked"></i><span>保存</span></el-link