vue进入页面加载数据缓慢实现loading提示
比如进入一个页面数据加载缓慢的页面后,等待后端返回数据显示在页面时给个loading的样式,像下面这样:代码实现如下:getStudent() {// 开始加载let loading = this.$loading({lock: true,//lock的修改符--默认是falsetext: "拼命加载中,请稍候...",//显示在加载图标下方的加载文案background: "rgba(0,0,0
·
比如进入一个页面数据加载缓慢的页面后,等待后端返回数据显示在页面时给个loading的样式,像下面这样:
代码实现如下:
getStudent() {
// 开始加载
let loading = this.$loading({
lock: true,//lock的修改符--默认是false
text: "拼命加载中,请稍候...",//显示在加载图标下方的加载文案
background: "rgba(0,0,0,0.8)",//遮罩层颜色
spinner: "el-icon-loading",//自定义加载图标类名
});
getStudent().then(res => {
if (res.code === 200) {
this.user = res.data;
// 获取数据显示成功后,关闭loading
loading.close();
} else {
this.$message.error("错误!");
}
});
}
参数列表说明如下(详细可以观看elementUI官网):
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 | object/string | document.body |
body | 同 v-loading 指令中的 body 修饰符 | boolean | false |
fullscreen | 同 v-loading 指令中的 fullscreen 修饰符 | boolean | true |
lock | 同 v-loading 指令中的 lock 修饰符 | boolean | false |
text | 显示在加载图标下方的加载文案 | string | — |
spinner | 自定义加载图标类名 | string | — |
background | 自定义加载图标类名 | string | — |
customClass | 自定义加载图标类名 | string | — |
更多推荐
已为社区贡献9条内容
所有评论(0)