雪是故乡白
2021-08-11 09:15
采纳率: 86.7%
浏览 143
已结题

elementui里面的switch怎样避免多次点击频繁问题

项目中使用了switch按钮 当点击改变状态发一次请求 这样如果用户多次点击就频繁发请求了 怎么优化一下 类似于防抖 让他频繁点击只触发最后一次 怎样实现呀

img

  • 好问题 提建议
  • 收藏

5条回答 默认 最新

  • 孤月葬花魂 2021-08-11 09:31
    已采纳

    基本上可以放弃v-model,改为value绑定

    img

    已采纳该答案
    评论
    解决 2 无用
    打赏 举报
  • CSDN专家-Time 2021-08-11 09:18

    用setInterval监听。如果多次点击就关闭ajax.

    例如:

    img

    img

    评论
    解决 无用
    打赏 举报
  • Alice_czy 2021-08-11 09:20

    查看一下这个组件的api,应该提供了事件api,增加一个防抖的函数吧,防抖节流封装可以看这个
    https://blog.csdn.net/Alice_czy/article/details/117786811 https://blog.csdn.net/Alice_czy/article/details/117786811

    评论
    解决 无用
    打赏 举报
  • 放风喽 2021-08-11 09:36

    使用全局loading,请求结束之前,全局loading遮住界面,防止操作

    评论
    解决 无用
    打赏 举报
  • 雪是故乡白 2021-08-11 10:42

    受 孤月葬花魂 的启发 弃用了v-model 结合百度的结果 优化了下 完成了类似防抖的减少频率
    大概思路是 请求成功后弹出message弹框 当message弹框消失后才可以再次点击发请求 为了提高用户体验给message加了关闭按钮 具体实现代码如下:

    html部分:

    <el-switch :value="value" @change="change" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    

    js部分:

        change(value) {
          let doms = document.getElementsByClassName('el-message')[0]
          if (doms == undefined) {
            this.$message({
              message: '请求发送成功',
              showClose: true,
              duration: 1000,
              type: 'success'
            })
            this.value = value
          }
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题