foreword
During the development process, when you click the submit button, or in some other scenarios, you will always encounter a loading loading box. Some ui libraries on the PC do not have such a loading box, which cannot meet business needs, so you can customize one yourself. The implementation process is as follows .
Effect picture (loading style can be customized)
Code
Custom component loading.vue (the picture is placed at the end of the article, right click and save as)
<template>
<div class="loading" v-show="msg.show">
<div class="load-box">
<img src="@/assets/img/load.png">
<!--<img src="@/assets/img/loading_white.png">-->
<span>{
{msg.title}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'loading',
props: {
msg: Object,
}
}
</script>
<style scoped lang="scss">
.loading {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
.load-box {
background-color: rgba(0, 0, 0, .5);
width: 100px;height: 100px;border-radius: 5px;
box-shadow:0px 1px 15px rgba(0,0,0, .5);color: #fff;
display: flex;flex-direction: column;align-items: center;
justify-content: center;letter-spacing: .8px;
font-size: 13px;
img{
width: 30px;margin-bottom: 8px;
-webkit-animation:rotate .8s linear infinite;
}
}
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
</style>
utils/loading.jsCreate a package js to control the display and hiding, and the text to be displayed
import {
createApp, reactive } from 'vue'
import myLoad from '@/components/Loading/loading.vue'
const msg = reactive({
show: false,
title: '加载中...'
})
const $loading = createApp(myLoad, {
msg}).mount(document.createElement('div'))
const load = {
show(title: any = msg.title) {
// 控制显示loading的方法
msg.show = true
msg.title = title
document.body.appendChild($loading.$el)
},
hide() {
// 控制loading隐藏的方法
msg.show = false
}
}
export {
load }
page use
import {
load } from '@/utils/loading.js';
// 在需要使用时调用show方法
// 例如在指定api调用，或者其他耗时操作时打开loading
// 不传参默认为 加载中...
load.show();
load.show('登录中...');
//在加载完成时关闭
load.hide();
summary
- You can choose which picture to use according to your own habits and methods, and you can also dynamically pass parameters to change.
- The style is modeled after the loading box on the mobile terminal. I am not used to using that kind of full-screen loading. You can also change the style to full-screen loading.
- In order to avoid the user clicking on other elements of the page during the loading process, the style level of this article is very high, and you can change it yourself
picture here
Right-click the picture and save it as, but there is a watermark here, you can also go to the icon library to find other loading icons instead, the effect is the same
