1回答

樱桃小胖子

2019-08-03

老师这边在源码中测试同学的代码是可以的，建议同学检查一下是否是下列文件的引入路径不正确

import MeSlider from 'base/slider';

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

import {sliderOptions} from './config';

老师测试代码：

<template>
  <div class="slider-wrapper">
    <me-slider :direction="direction" :loop="loop" :interval="interval" :paginations="pagination">
      <swiper-slide v-for="(item,index) in sliders" :key="index">
        <a :href="item.linkUrl" class="slider-link">
          <img :src="item.picUrl" 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';

export default {
  name: 'HomeSlider',
  components: {
    MeSlider,
    swiperSlide
  },
  data() {
    return {
      direction: 'horizontal', // horizontal:水平 vertical:垂直
      loop: true, // 是否无缝滚动
      interval: 0, // 自动播放时间间隔，为0则不自动播放
      pagination: true, // 是否需要分页器
      sliders: [{
          linkUrl: '#',
          picUrl: require('./1.jpg')
        },
        {
          linkUrl: '#',
          picUrl: require('./2.jpg')
        },
        {
          linkUrl: '#',
          picUrl: require('./3.jpg')
        },
        {
          linkUrl: '#',
          picUrl: require('./4.jpg')
        }
      ]
    };
  }
};

</script>
<style scoped>
.slider-wrapper {
  height: 183px;
}

.slider-link {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-img {
  width: 100%;
  height: 100%;
}

</style>

祝学习愉快！

0