//slide.vue
<template>
  <div class="slider-wapper">
    <me-loading v-if="!sliders.length"/>
    <!-- <me-slider
      :data="sliders"
      :direction="direction"
      :loop="loop"
      :interval="interval"
      :pagination="pagination"
       v-if="sliders.length"
      >
      <swiper-slide
          v-for="(item, index) in sliders"
          :key="index"
        >
        <a :href="item.linkUrl" alt="" class='slider-link'>
          <img :src="item.picUrl" alt="" class='slider-img'>
        </a>
      </swiper-slide>
    </me-slider> -->
  </div>
</template>

<script>
    import MeSlider from 'base/slider';
   import {swiperSlide} from 'vue-awesome-swiper';
   import {sliderOptions} from './config';
  import {getHomeSlider} from 'api/home';
  import MeLoading from 'base/loading';


    export default {
      name: 'HomeSlider',
      components:{
        MeSlider,
        swiperSlide,
        MeLoading
      },
      data(){
        return{
          direction: sliderOptions.direction,
          loop: sliderOptions.loop,
          interval: sliderOptions.interval,
          pagination: sliderOptions.pagination,
          
          sliders: []
         
        }
      },
      created(){
        this.getSliders()
      },
      methods:{
       getSliders() {
         getHomeSlider().then(data =>{
           this.sliders = data;
         });
       }
      }
      
    }
</script>

<style lang="scss" scoped>
  
  .slider-wapper {
    width: 100%;
    height: 183px;
  }

  .slider-link {
    display: block;
  }

  .slider-link,
  .slider-img {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
</style>

//loading/index.vue

<template>
  <div class="mine-loading">
      <span class="mine-loading-indicator" v-if="indicator==='on'">
          <slot><img src="./loading.gif" alt="loading"></slot>
      </span>
      <span class="mine-loading-text" v-if="text">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'MeLoading',
  props:{
        indicator: {
        type: String,
        default: 'on',
        validator(value) {
          return ['on', 'off'].indexOf(value) > -1;
        }
      },
      text:{
          type:String,
          default:'加载中...'
      }
  }

}

</script>
<style lang='scss' scoped>
  @import "~assets/scss/mixins";

    .mine-loading{
      overflow:hidden;
      width: 100%;
      height:100%;
      @include flex-center(column)
    }
    .mine-loading-indicator ~ .mine-loading-text{
        margin-top: 6px;
    }
 
</style>