vue加载图标实现loading组件

当图片还没加载完成时，可以通过loading组件填充空白区

效果图

<template>
    <div class="mine-loading" :class="{'me-loading-inline':inline}">
        <span class="mine-loading-indicator">
            <img src="./loading.gif">
        </span>
        <span class="mine-loading-text" v-if="loadingText">{
  {loadingText}}</span>
    </div>
</template>

<script>
export default {
   name:"MeLoading",
   props:{//过滤器
        inline:{
            type:Boolean,
            default:false
        }
   },
   data(){
       return{
           loadingText:"加载中..."
       }
   }
}
</script>

<style lang="scss" scoped>

    .mine-loading{
        width:100%;
        height:100%;