模拟进度条加载进度

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

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

定义的变量:

	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)
		}
	}

你可能感兴趣的:(前端,javascript,开发语言)