当图片还没加载完成时,可以通过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%;
display: flex;
just