封装loading加载状态子组件


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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM