VUE2.0 stylus封装loading加载过渡组件

本文主要介绍如何封装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组件隐藏。