首先:写一个loading的组件
<template> <div class="loading"> <img width="20px" height="20px" src="./loading.gif"> <p class="desc">{{title}}</p> </div> </template>
script里面接收一个title的参数可以传入载入的信息:
<script> export default { props: { title: { type: String, default: '载入中' } } } </script>
css样式如下:
<style lang="stylus" scoped> .loading width 100% text-align center .desc line-height 20px color $color-text-l font-size $font-size-small </style>
在组件里面使用:外面给一个盒子,控制loading显示的位置。
<div class="loading-container" v-show="!discList.length"> <loading></loading> </div>
.loading-container position absolute width 100% top 50% transform translateY(-50%)这里借助了css3的transform translateY来实现向上移动自身高度的50%,是一个小技巧。