1. 创建 loading 公用组件
<template>
<div class="load-container">
<div class="load"></div>
<div class="text">加载中...</div>
</div>
</template>
<script>
export default {
name: 'Loading',
}
</script>
<style scoped >
.load-container .load {
width: 60px;
height: 60px;
background-color: #1e8fc6;
margin: 50px auto;
animation: rotateplane 1.2s infinite ease-in-out;
}
.load-container .text {
text-align: center;
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
loading效果如下：
需要在 login.vue 页面背景图完全加载完成之前显示上面的loading效果
2. login.vue 页面
<template>
<div>
<div class="loading-wrapper" v-show="showLoading">
<Loading></Loading>
</div>
<div class="login-wrapper" v-show="!showLoading">
<img :src="imgUrl" alt="" width="100%" height="100%">
<div class="login">
首页内容
</div>
</div>
</div>
</template>
<script>
import Loading from '@/components/loading/Loading.vue'
export default {
name: 'Login',
components: {
Loading
},
data() {
return {
showLoading: true, // 显示loading
imgUrl: require('../../assets/images/bg-img.jpg') // 背景图片地址
}
},
mounted () {
let bgImg = new Image()
bgImg.src = this.imgUrl // 获取背景图片的url
bgImg.onerror = () => {
console.log('img onerror')
}
bgImg.onload = () => { // 等背景图片加载成功后 去除loading
this.showLoading = false
}
},
methods: {
}
}
</script>
<style scoped>
.loading-wrapper {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #aedff8;
display: flex;
align-items: center;
justify-content: center;
}
.login-wrapper {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.login-wrapper img {
position: absolute;
z-index: 1;
}
.login {
max-width: 340px;
margin: 60px auto;
background: #fff;
padding: 20px 40px;
border-radius: 10px;
position: relative;
z-index: 9;
}
</style>
