First: Write a loading component
<template>
<div class="loading">
<img width="20px" height="20px" src="./loading.gif">
<p class="desc">{{title}}</p>
</div>
</template>
Copy the code
An argument that receives a title in a script can pass in loaded information: <script>export default {
props: {
title: {
type: String.default: 'Loading'
}
}
}
</script>
Copy the code
Inside a component: A box is given outside to control where Loading is displayed.
<div class="loading-container" v-show=! "" discList.length">
<loading></loading>
</div>
.loading-container
position absolute
width 100%
top 50%
transform translateY(-50%)
Copy the code
It’s a small trick to use CSS3’s Transform translateY to move up 50% of its height.