vue --- > 按钮的防重复点击事件

按钮的防重复点击事件

• :loading属性
• 当loading = true时:按钮会显示一个旋转的圆圈.此时的按钮是无法点击的
• 当loading = false时:按钮重新变为可点击的状态
• 可以通过使用一个变量来控制按钮的可点击性,当提交时,按钮不可点击,提交完毕后,按钮可以点击

<van-button :loading="openLoading">提交</van-button>

data(){
  return {
    openLoading:false
  },
  methods:{
    axiosRegisterUser(){
      this.openLoading = true;
      axios({
        url: ...,
        method:'post',
        data:{
          userName: this.username,
          password: this.password
        }
      })
      .then(response=>{
        if(success){
          // 跳到首页
          this.$router.push('/')
        } else{
          Toast.fail('注册失败');
          this.openLoading = false;
        }
      })
    }
  }
}