【antd-design-vue】progress 前端自定义进度条
项目需求:前端自定义进度条,当调接口成功的时候,显示一个进度条动态加载的效果。<a-modaltitle="上报进度":width="400"centered:visible="processVisible"bodyStyle="padding: 0;":footer="null":zIndex="zIndex"@cancel="handleCancel">
·
项目需求:前端自定义进度条,当调接口成功的时候,显示一个进度条动态加载的效果。
<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
}
更多推荐
已为社区贡献35条内容
所有评论(0)