防止vue重复点击

 方式1:

addSth() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.$http.post('http://xxxxxx/aaa/bbb').then(response => {
      loading.close();//取消加载圈圈
    }, response => {
      this.$alert('网络繁忙,请稍后重试!')
    })
  },

 

 方式2:

<template>
 <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

 

posted @ 2020-05-12 18:24  君子笑而不语  阅读(189)  评论(0编辑  收藏  举报