vue載入圖標實現loading組件

當圖片還沒載入完成時，可以通過loading組件填充空白區

效果圖

components/loading/index.vue

<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;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        //圖文左右排列時
        &.me-loading-inline{
            flex-direction: row;
           
            .mine-loading-indicator ~ .mine-loading-text{
                margin-top:0px;
                margin-left:7px;
            }
        }

        // 存在.mine-loading-indicator和.mine-loading-text時
        .mine-loading-indicator ~ .mine-loading-text{
            margin-top:7px;
        }
    }
</style>

記得loading.gif也丟到這個目錄里

src/components/slider/index.vue

<template>
  <div class="slider-wrap">
    <me-loading v-if="!sliders.length" />
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(slider,index) in sliders" :key="index">
          <a :href="slider.linkUrl">
              <img :src="slider.picUrl">
          </a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="sliders.length"></div>
      <div class="swiper-button-prev" slot="button-prev" v-if="sliders.length"></div>
      <div class="swiper-button-next" slot="button-next" v-if="sliders.length"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { getSliders } from 'api/slider';
import MeLoading from 'components/loading';
 
export default {
    name:"Slider",
    title: 'Autoplay',
    components:{
        Swiper,
        SwiperSlide,
        MeLoading
    },
    data() {
      return {
        sliders:[],
        swiperOptions: {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    created(){
        //一般在created里獲取遠程數據
        this.getSliders();    
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      }
    },
    mounted() {
      //console.log('Current Swiper instance object', this.swiper);
      this.swiper.slideTo(3, 1000, false);
    },
    methods:{
        getSliders(){
            return getSliders().then(data=>{
                //console.log(data);
                this.sliders=data;
                
            });
        }
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
        width:100%;
        height:180px;
    }
    .slider-wrap{
      height:180px;
    }
    .swiper-slide a{
        display:block;
        width:100%;
        height:100%;

        & img{
            width:100%;
            height:100%;
        }
    }
</style>