It is better to ask for yourself than to ask for others
How to use loading you don’t know
Regarding page interaction, the biggest fear is that the interface waiting time is too long and the user experience is not good.
And how to improve user experience? 接口返回速度This is for back-end students to optimize, and front-end students can also use it 加载loadingto optimize the experience.
Element provides two methods of calling Loading: instructions and services
For details, please check the official website: Element Loading loading
1. Use in command mode
1.1 Default loading
For the custom instruction v-loading, you only need to bind Boolean. By default,
Loading 遮罩会插入到绑定元素的子节点by adding the body modifier, the mask can be inserted into the body in the DOM.
How to use it:
<template>
<div v-loading="loading">
指定loading插入区域
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
loading: false
};
},
mounted() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 2 * 1000);
}
};
</script>
<style lang='scss' scoped>
</style>
1.2 Custom loading
Add an attribute to the element bound to the v-loading directive
element-loading-text, and its value will be rendered as加载文案and displayed below the loading icon. Similarly, theelement-loading-spinnerandelement-loading-backgroundattributes are used to set图标类名and respectively背景色值.
How to use it:
<template>
<div
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
指定loading插入区域
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
loading: false
};
},
mounted() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 2 * 1000);
}
};
</script>
<style lang='scss' scoped>
</style>
1.3 Full page loading
When using the command mode,
全屏遮罩需要添加fullscreen修饰符(the mask插入至 bodywill be on ),锁定屏幕的滚动you can use it if necessarylock修饰符; when using the service mode, the mask will be full screen by default, no additional settings are required.
How to use it:
<template>
<div v-loading.fullscreen.lock="loading">
整页加载loading
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
loading: false
};
},
mounted() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 2 * 1000);
}
};
</script>
<style lang='scss' scoped>
</style>
2. How to use the service
If Element is fully introduced, there will be one on Vue.prototype
全局方法 $loading, and its calling method is: this.$loading(options), which will also return a Loading instance.
Loading called as a service needs to be closed asynchronously
2.1 Use of this.$loading
<template>
<div id="loading_dom">
<el-button type="primary" @click="openLoading">服务方式开启loading</el-button>
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
};
},
methods: {
openLoading() {
// 开启loading
const loadingInstance = this.$loading({
lock: true, //lock的修改符--默认是false
text: "Loading", //显示在加载图标下方的加载文案
spinner: "el-icon-loading", //自定义加载图标类名
background: "rgba(0, 0, 0, 0.1)", //遮罩层颜色
target: document.querySelector("#loading_dom") //loading覆盖的dom元素节点 默认插入body标签
});
// 关闭loading时机
setTimeout(() => {
loadingInstance.close();
}, 2 * 1000);
}
}
};
</script>
<style lang='scss' scoped>
</style>
2.2 Use of Loading.service
<template>
<div>
<el-button type="primary" @click="openLoading">开启loading</el-button>
</div>
</template>
<script>
import {
Loading } from "element-ui";
export default {
name: "loading",
data() {
return {
};
},
methods: {
openLoading() {
let loadingInstance = Loading.service(options);
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
}
}
};
</script>
<style lang='scss' scoped>
</style>