vue2.0饿了么 按钮多次点击重复提交数据

image.png

最近在写这个饿了么这个项目的时候 这个加减组件一直会重复点击多次 怎么找都找不到解决办法 最后在朋友的帮助下解决了
这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。
事件分为两种情况：
•第一种： 不操作数据型
•第二种： 操作数据型

 data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isDisable: false (声明一个变量)
    }
  },
  methods:{
        addcart(event){ //左侧加减按钮 商品数量多少
          if (this.isDisable) return false;
               this.isDisable = true
              setTimeout(() => { //防止用户重复点击             https://www.jb51.net/article/139840.htm
                if (!event._constructed) { //因为购物车按钮在bscroll里面,所以需要处理掉bscroll的事件类型
                  return;
                }
                if(!this.food.count){
                  Vue.set(this.food,'count',1)
                }else{
                  this.food.count++;
                }
                this.isDisable = false;
                this.$emit("cart",event.target)//派发一个动画方法
              }, 10)
        }, 

1提交按钮

这里我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false，按钮可以点击。 当我们点击这个按钮的时候，首先将按钮的绑定isDisable设置为true，1秒后立马将其置为false。 所以用户只能有一秒的时间去操作这个按钮。

2提交按钮

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,2000)
this.disabled = true
}
})
}
}

实现原理：通过计时器讲button属性更改，点击完之后讲button属性设置为disable
vue绑定button的disable属性为:disabled:'变量名'

原文网址：https://www.jb51.net/article/139840.htm
https://blog.csdn.net/jxg1473819657/article/details/83781364 （请求提交）