vue获取页面数据结束前添加loading,结束后再显示页面
vue获取页面数据结束前添加loading,结束后再显示页面今天做项目的时候,后端提供了一个接口返回的数据量很大,获取完整的数据需要一定的时间,而没有完整的数据是没有办法显示正常的界面的,所以就需要添加一个loading的效果。我直接是选择使用element-ui提供的loading组件来实现,实现过程如下(较为简单,只是记录一下,方便以后使用):首先,vue创建页面的函数为created()方法
·
vue获取页面数据结束前添加loading,结束后再显示页面
今天做项目的时候,后端提供了一个接口返回的数据量很大,获取完整的数据需要一定的时间,而没有完整的数据是没有办法显示正常的界面的,所以就需要添加一个loading的效果。
我直接是选择使用element-ui提供的loading组件来实现,实现过程如下(较为简单,只是记录一下,方便以后使用):
首先,vue创建页面的函数为created()方法,这个方法内部调用我们需要的数据的接口。
我需要实现的效果就是这个接口获取好数据之前要有个loading等待的效果,用以下步骤添加:
- 引入loading组件
import { Loading} from "element-ui";
- 启用loading服务
let loadingInstance = Loading.service({ //启动loading服务
target: document.getElementById("detailClass"),
fullscreen: true,
});
- 获取完数据化关闭loading服务
loadingInstance.close() //关闭loading
-
完整代码结构如下
这样就实现了这样的一个简单的功能,关于loading的更多用法可以去element-ui官网上去看,可以修改loading样式以及一些其他的使用方法。 -
element-ui官网:https://element.eleme.cn/#/zh-CN
更多推荐
已为社区贡献1条内容
所有评论(0)