封装loading加载状态子组件

Posted 2021-03-01 marquess

现在流行的框架如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
    }