axios请求遮罩及防止用户暴力点击重复点击

<script type="text/javascript">
  // 防重复点击(指令实现)
  Vue.directive('preventReClick', {
    inserted (el, binding) {
      el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, binding.value || 3000)
        }
      })
    }
  });
  let app = new Vue({
  	el: '#app',
  	data: {
  		loading:'',
  		url:'你的请求地址',
  		data:''
  	},
  	methods: {
      startLoading(){
        this.loading = this.$loading({
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
      },
      endLoading(){
        this.loading.close();
      },
      intercept(){//axios拦截器
        //请求数据拦截器
        axios.interceptors.request.use(request => {
          this.startLoading();
          return request
        }, err => {
          return Promise.reject(err);
        });
        //接收响应拦截器
        axios.interceptors.response.use(response => {
          this.endLoading();
          return response
        }, err => {
          console.log(err)
          if (err && err.response) {
            switch (err.response.status) {
              case 400: err.message = '请求错误(400)'; break;
              case 401: this.$router.push('/login'); break;
              case 403: err.message = '拒绝访问(403)'; break;
              case 404: err.message = '请求出错(404)'; break;
              case 408: err.message = '请求超时(408)'; break;
              case 500: err.message = '服务器错误(500)'; break;
              case 501: err.message = '服务未实现(501)'; break;
              case 502: err.message = '网络错误(502)'; break;
              case 503: err.message = '服务不可用(503)'; break;
              case 504: err.message = '网络超时(504)'; break;
              case 505: err.message = 'HTTP版本不受支持(505)'; break;
              default: err.message = `连接出错(${err.response.status})!`;
            }
          } else {
            err.message = '连接服务器失败!'
          }
          this.$message.error(err.message);
          return Promise.reject(err);
        });
      },
      getData() {
        axios.get(this.url).then(res => {
          this.data = res.data
        });
      }
  	},
  	mounted() {
      //axios拦截
      this.intercept();
 	}
  });
</script>

<el-button type="primary" @click="getData()" v-prevent-re-click>请求</el-button>

这里要注意防"重复点击指令preventReClick"由于html对大小写不敏感,vue规定驼峰写法要写成横线连接,即写成"v-prevent-re-click"