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".loadingwidth: 100%text-align: centerimgwidth 0.48remheight 0.48rem.descline-height: 0.4remfont-size: 0.24remcolor: 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圖：

總結

以上是生活随笔為你收集整理的Vue+stylus实现自定义文字的loading组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。