本文主要介紹如何封裝loading載入過渡元件，本文的樣式使用的stylus的寫法
1.在對應的公共元件目錄下，建立loading.vue（如果沒有安裝stylus，請現在package.json配置一下後重啟服務）
對應的程式碼如下：

<template>
  <div class="loading">
    <img width="24" height="24" src="./loading.gif">  // .gif圖片為動態載入圖片，需要的小夥伴自己網上找一個哦
    <p class="desc">{{title
 
}}</p>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  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>

variable.styl

// 顏色定義規範
$color-background = #222
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333
$color-dialog-background = #666
$color-theme
 
 = #ffcd32
$color-theme-d = rgba(255, 205, 49, 0.5)
$color-sub-theme = #d93f30
$color-text = #fff
$color-text-d = rgba(255, 255, 255, 0.3)
$color-text-l = rgba(255, 255, 255, 0.5)
$color-text-ll = rgba(255, 255, 255, 0.8)

//字型定義規範
$font-size-small-s = 10px
$font-size-small = 12px
$font-size-medium = 14px
$font-size-medium-x = 16px
$font-size-large = 18px
$font-size-large-x = 22px

2.在.vue檔案中引入loading元件

<div class="loading-container" v-show="!discList.length">
  <loading></loading>
</div>
<script type="text/ecmascript-6">
import Loading from 'base/loading/loading'
export default {
  name: 'recommend',
  data() {
    return {
      discList: []
    }
  },
  components: {
    Loading
  }
}
</script>

tips：通過 v-show來判斷是否顯示loading元件，上述案例是當有discList資料傳入時，loading元件隱藏。