vue中加全局loading并添加自定义加载语

最新推荐文章于 2024-06-25 09:33:03 发布

一个女程序媛

最新推荐文章于 2024-06-25 09:33:03 发布

阅读量3.6k

点赞数 3

分类专栏： vue问题文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_37582804/article/details/105268949

版权

vue问题专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element UI的加载组件实现页面加载效果，包括组件的导入、字段定义、加载调用及计时器设置，实现动态显示加载进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
首先在模板页最外层标签添加绑定
< template v-loading=“loading”>
导入
import {Loading} from ‘element-ui’
定义字段初始值：
loading: false
加载调用
startLoading() {
this.loading =Loading.service({
lock: true,
// text: ‘加载中倒计时：’+this.count,
background: ‘rgba(190, 190, 190, 0.5)’
})
},
setTimer() {
let endMsRes = (new Date()).getTime() + 60000;
this.codeCountDown(endMsRes)
},
codeCountDown ( endMsRes) {
this.count= Math.ceil((endMsRes - (new Date()).getTime()) / 1000)
let time = setTimeout(() => {
this.count–;
this.loading.text="拼命加载中: "+this.count//放置定时计数
if (this.count< 1) {//判断60秒后停止loading
this.loading.close();
//this.loading=false;
this.radioChange();
this.count= 60
} else {
this.codeCountDown(endMsRes)//利用回调完成计数
}
}, 1000)
},