模拟进度条加载进度

需求：使用elementPlus的进度条，每2秒进度条加载，直到加载到90%，停留，等回调成功加载到100%

1. 首先考虑使用setInterval,使用的同时注意清除
2. 然后就是进度条的百分比做累加
   页面代码：

<template>
  <div style="width: 1000px;">
   <el-button type="warning" @click="handleProgress">点击弹出进度条</el-button>
   <el-dialog v-model="showProgress">
	   <el-progress :percentage="precentage" striped-flow striped duration="2" :stroke-width="10"></el-progress>
   </el-dialog>
  </div>
</template>

定义的变量：

	const showProgress = ref(false) //控制弹出层进度条的显示隐藏
	const precentage = ref(0) // 进度条的百分比 
	const timer = ref(null) //定时器变量

逻辑代码：

//点击button弹出进度条
const handleProgress = ()=>{
		precentage.value = 0
		showProgress.value = true
		timer.value = setInterval(()=>{
			setTimer()
		},20)
	}
	设置定时器事件，因为定时器是没20毫秒加2，所以进度要到90需要大于88
	const setTimer = ()=>{
		precentage.value+=2
		if(precentage.value > 88){
			clearInterval(timer.value)
			//这个定时器一般逻辑会放到接口成功之后的回调中，模拟了一个定时器将进度条设置到100%，关闭弹出层
			setTimeout(()=>{
				precentage.value = 100
				showProgress.value = false
			},3000)
		}
	}