Modal对话框progress

Posted 2023-02-02 辣可乐少加冰

文章目录

• a-modal 弹出层

a-modal 弹出层

a-modal 提示框（visible）：

定义好组件

    <a-modal
      title="加载中..."
      :visible="visible"
      width="400px"
      centered
      :footer="null"

      @cancel="handleCancel"
    >
      <a-progress :percent="percent"></a-progress>
    </a-modal>

	data() 
		visible:false,
		percent:0,
   

代码如下（示例）：

// 点击事件中编写逻辑 
ExportClick () 
      that.percent = 0
      that.visible = true
      const downtime = setInterval(() => 
        // 定义setinterval percent++ 
        that.percent++
        if (that.percent >= 99) 
          clearInterval(downtime)
        
      , 100)
     
      axios.post('/', 
        ...setIdcardAttr,
      )
        .then(
	          function (res) 
	            if (res.data.responseCode === '10001') 
	              that.percent = 100
	              clearInterval(downtime)
	              that.visible = false
	              that.$message.success('下载成功')
	              window.location.href = `$res.data.data.url`
	             else 
	              that.visible = false
	            
	          
	        )
            .finally((res) => 
              that.$emit('afterClose')
              that.visible = false
            )
    ,
    

---

世界因代码而改变