暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

vue 给el-button添加加载效果

原创 瘦十斤改名字 2020-08-25
3086

需求:避免点击开始考试时,用户在同一时刻多次点击(防止重复提交的问题)
(1)给按钮绑定( :loading=“btnLoading”)

 <el-button type="primary" 
 :loading="btnLoading"
  @click="startTest">{{test.paperId ? '继续' : '开始'}}测试</el-button>

(2)在data中初始化 btnLoading:

data () {
      return {
        btnLoading: false
      }
    },


(3)点击开始考试时设置:

async startTest (type) {
        if (this.btnLoading) return
        this.btnLoading = true   //在考卷没有出来时,加载效果
        let _test = this.test
        let _params = {
          configId: _test.id,
          paperId: type === 'result' ? null : _test.paperId
        }
        this.testShow = false
        let { data } = await startTestApi(_params)
        this.btnLoading = false  //在考卷出来后,关闭加载效果
        if (data.success) {
          this.testData = data.operateCallBackObj
          this.testShow = true
        } else {
          this.$message({
            message: data.operateMessage,
            type: 'error'
          })
        }
      }

「喜欢这篇文章,您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容,转载时必须标注文章的来源(墨天轮),文章链接,文章作者等基本信息,否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容,欢迎发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论