vue进入页面加载数据缓慢实现loading提示过程
作者：无语，人生的过客� � �
这篇文章主要介绍了vue进入页面加载数据缓慢实现loading提示过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
进入页面加载数据缓慢实现loading提示
比如进入一个页面数据加载缓慢的页面后，等待后端返回数据显示在页面时给个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 | — |
vue中加载loading问题
首先在components文件夹中新建一个loading.vue组件：
1.loading.vue组件内容如下
<template>
<div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="sun-loading"></div>
</div>
</template><script>
export default {
name: 'loading',
data() {
return {
loading: false
}
},
created() {
var that = this;
this.bus.$on('loading', function(data) {
that.loading = !!data;
})
}
}
</script>css代码：
/*loading开始*/
.sun-loading {
width: 45px;
height: 45px;
display: block;
animation: sunLoading 1s steps(12, end) infinite;
background: transparent url('data:image/gif;base64,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');
background-size: 100%;
margin:auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
}
/*loading结束*/ 2.app.vue中设置
<template>
<div id="app">
<router-view/>
<loading></loading>
</div>
</template>
<script>
import loading from '@/components/common/loading'
export default {
name: 'App',
components:{loading}
}
</script>3.在main.js中设置
Vue.prototype.bus = new Vue;
4.在.vue组件中使用
// 显示loading
this.bus.$emit('loading', true);
// 关闭loading
this.bus.$emit('loading', false);效果如下：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。