自定义指令,指定时间内只能触发按钮一次,防止多次点击

 vue项目

一  在src文件夹下创建directive文件夹,在directive文件夹下创建dbClick.js文件:

二   添加代码如下:

import Vue from 'vue';

Vue.directive('dbClick', {
  inserted(el) {
    el.addEventListener('click', () => {
      el.classList.add('is-disabled');
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled');
      }, 500);
    });
  }
});

三  main.js中引入dbClick.js文件

import '@/directive/dbClick';

四 应用

<el-button type="primary" @click="confirm" v-db-click>确 定</el-button>