封裝loading加載狀態子組件

現在流行的框架如element ui 、vant 等都有封裝好的loading組件，直接拿來用。

微信小程序、uni-app等也有封裝的loading組件，幾個代碼輕松引用。

不過作為基礎，知道組件原理還是不錯的

 

loading組件需要引用一張gif動圖

 

<template>
  <div class="loading">
    <img width="24" height="24" src="./loading.gif">
    <p class="desc">{{title}}</p>
  </div>
</template>

<script >
  export default {
    props: {
      title: {
        type: String,
        default: '加載中...'
      }
    }
  }
</script>

<style scoped lang="stylus" >

  .loading
    width: 100%
    text-align: center
    .desc
      line-height: 20px
      font-size: $font-size-small
      color: rgba(255, 255, 255, 0.5)
</style>

父組件中引用

      <!-- 自定義封裝加載狀態組件 -->
      <div class="loading-container" v-show="!list.length">
        <loading></loading>
      </div>

 import Loading from '@/common/loading/loading'

    components: {
      Loading
    }