/base/slider/index.vue

<template>

<swiper :option="swiperOption">

<slot></slot>

<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>

</swiper>

</template>

<script>

import {swiper} from 'vue-awesome-swiper';

export default {

name: 'MeSlider',

components: {

swiper

},

props: {

direction: {

type: String,

default: 'horizontal',

validator(value) {

return [

'horizontal',

'vertical'

].indexOf(value) > -1;

}

},

interval: {

type: Number,

default: 3000,

validator(value) {

return value >= 0;

}

},

loop: {

type: Boolean,

default: true

},

pagination: {

type: Boolean,

default: true

}

},

data() {

return {

swiperOption: {

watchOverflow: true,

direction: this.direction,

autoplay: this.interval ? {

delay: this.interval,

disableOnInteraction: false

} : false,

slidersPerview: 1,

loop: this.loop,

pagination: {

el: this.pagination ? '.swiper-pagination' : null

}

}

};

}

};

</script>

<style scoped>

.swiper-container {

width: 100%;

height: 100%;

}

</style>

/pages/home/slider.vue

<template>

<div class="slider-wrapper">

<me-slider

: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';

export default {

name: 'HomeSlider',

components: {

MeSlider,

swiperSlide

},

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 scoped>

.slider-wrapper {

height: 183px;

}

.slider-link {

display: block;

}

.slider-link,

.slider-img {

width: 100%;

height: 100%;

}

</style>