element ui 计数器长按,快速点击的连续提交问题解决

最新推荐文章于 2023-08-04 15:58:24 发布

hello&Kitty

最新推荐文章于 2023-08-04 15:58:24 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_33239420/article/details/100767109

版权

本文探讨了Element UI计数器组件在长按时导致的数据重复提交问题，并提供了详细的解决方案，包括使用mouseup事件、定时器防抖及边界值判断，确保数据准确提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:点击计数器±,修改数据并提交
问题:由于计数器按钮可以长按,change监听到数据变化导致数秒内提交几十次数据
解决:element计数器有默认的change事件,所以我在change事件里添加mouseup事件提交数据,
问题2:change事件里的mouseup会执行多次累加(console出来的是1 1,2 1,2,3 1,2,3,4 …以此类推),也就是说还是会提交多次,而且越来越多
解决2:在on前面加一个off

      handleChange(id, val) {
        let _this = this;
        $('.el-input-number span').off('mouseup').on('mouseup',function () {
          _this.numChange(id,val)//提交数据函数
        });
      },

问题3:快速点击还是会提交多次
解决3:用定时器

		handleChange(id, val) {
			let _this = this;
            $('.el-input-number span').off('mouseup').on('mouseup',function () {
              _this.mytime=new Date().getTime()
              clearTimeout(_this.mytimeout)
              _this.mytimeout=setTimeout(function () {
                if(new Date().getTime()-_this.mytime>500){
                     _this.numChange(id,val)//提交数据函数
                }
              },600)
            });
		}

问题4:到达最大最小数值限制时还会触发提交
解决4:下方代码

handleChange(id, val) {
  let _this = this;
  $('.el-input-number span').off('mouseup').on('mouseup',function () {
    _this.mytime=new Date().getTime()
    clearTimeout(_this.mytimeout)
    _this.mytimeout=setTimeout(function () {
      if(new Date().getTime()-_this.mytime>500){
        if(val!=_this.min_max){
          _this.numChange(id,val)//提交数据函数
          _this.min_max=val
        }
      }
    },600)
  });
}