项目需求:前端自定义进度条,当调接口成功的时候,显示一个进度条动态加载的效果。
在这里插入图片描述
在这里插入图片描述

  <a-modal
      title="上报进度"
      :width="400"
      centered
      :visible="processVisible"
      bodyStyle="padding: 0;"
      :footer="null"
      :zIndex="zIndex"
      @cancel="handleCancel"
    >
      <div class="baseinfo">
        <a-progress :percent="percent" class="baseProgess"/>
      </div>
      <div class="baseinfoFoot">
           <span class="baseinfoing"> {{progressUp}}</span>
      </div>
    </a-modal>
      processVisible: false,
      percent: 100,
      progressUp:'上报中,请稍候.......'
 confirmupdate() {
         this.processVisible = true
          this.percent = 0
          let that = this
          let timer = setInterval(function() {
            that.percent++
            if (that.percent == 90) {
              clearInterval(timer)
              that.percent = 100
              that.progressUp = '上报已完成'
              that.processVisible = false
            }
          }, 10)
          this.visible = false
          }
Logo

前往低代码交流专区

更多推荐