在vue中手动实现简易的“正在加载”动画

一、背景需求

当页面有大量数据需要渲染时，我们希望给用户提供一个等待的预期
也就是说，在数据渲染之前，在页面上显示“正在加载”的简易动画

二、实现过程

我们可以把这一部分的代码抽离出来，作为基础/公用组件

// loading.vue
<template>
  <div class="loading">
    <img width="24" height="24" src="./loading.gif">
    <p class="desc">{{this.title}}</p>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'Loading',
  props: {
    title: {
      type: String,
      default: '正在载入...'
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .loading
    width: 100%
    text-align: center
    .desc
      line-height: 20px
      font-size: $font-size-small
      color: $color-text-l
</style>

然后在具体的页面组件中，引入并注册 Loading
用一个Div去包裹 Loading 标签
并使用v-show来对这个Div的显示和消失作切换

<div class="loading-container" v-show="!discList.length">
    <Loading></Loading>
 </div>

数组 discList 就是将要渲染的数据