vue+stylus实现自定义文字的loading组件

loading.vue源码：

<template>
<div class="loading">
<img src="./loading.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
img
width 0.48rem
height 0.48rem
.desc
line-height: 0.4rem
font-size: 0.24rem
color: rgba(255, 255, 255, 0.5)
</style>


使用方法，首先引入组件并注册：

import Loading from 'base/loading/loading'
export default {
components: {
Loading
}
}

使用：
<loading title="载入中.." v-show="!discList.length"></loading>效果：



gif图：