VUE学习17-封装swiper

在学习16中的最后,只是简单对swiper.js进行简单组件化封装。在实际应用中,swiper但使用需要配合许多参数。因此尝试将参数传递也包括在封装中。

在Vue中 props down, events up,即父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

封装步骤:

  1. 设定轮播器的template样式。⚠️注意:A) 需要留下具名插槽,用于子组件使用时向其中添加数据。后期可以根据插槽的名称添加多个轮播器。 B) 加上轮播器pagination,也就是小圆点。
  2. 安装swiper,并引入依赖。swiper.js,swiper.min.css
  3. 设定轮播器属性。swiper.vue组件中使用props设定swiper的各个属性的默认值和可接受类型。
  4. 初始化swiper组件。在mounted()生命周期中进行初始化,并且在初始化时传入:轮播容器的类名swiperId+轮播组件配置对象(是否自动播放、播放方向、特效、是否循环,分页器类型等。
  5. 使用页面引入轮播器。A) 在要使用Swiper.vue轮播组件的template里面添加<swiper></swiper>标签,并在标签中注明swiper轮播器的各种属性,否则组件就使用默认值。 B) 在下方<script>标签中引入封装的swiper.vue,并在component属性中指定“用在模板中的自定义元素的名称”(也就是swiper)。
  6. 使用具名插槽添加数据。在<swiper>标签中,使用具名插槽向其中添加轮播器中等图片等数据。

swiper.vue封装示例

子组件使用示例


Swiper.vue模块:template

<template>
  <div class="swiper-container" :class='swiperId'>
    <div class="swiper-wrapper">
      <!-- 存放具体的轮播内容 -->
      <slot name='swiper-slot'></slot>
    </div>
    <!-- 分页器 -->
    <div :class="{'swiper-pagination':pagination}"></div>
  </div>
</template>

Swiper.vue模块:script

<script>
import Swiper from 'swiper'
import '_swiper@5.3.0@swiper/css/swiper.min.css'

export default {
  // swiper 组件属性验证
  props: {
    swiperId: { // 轮播容器class属性的类名
      type: String,
      default: ''
    },
    effect: { // 图片切换效果:slide,fade,cube,overflow,flip
      type: String,
      default: 'slide'
    },
    loop: { // 轮播循环
      type: Boolean,
      default: true
    },
    direction: { // 图片滑动方向:水平horizontal,垂直vertical)
      type: String,
      default: 'horizontal'
    },
    pagination: { // 使用分页导航
      type: Boolean,
      default: true
    },
    paginationType: { // 分页器样式:bullets,fraction,progressbar,custom
      type: String,
      default: 'bullets'
    },
    autoplay: { // 自动切换
      type: Number,
      default: 2000
    }
  },

  data () {
    return {
      dom: ''
    }
  },

  mounted () {
    // swiper初始化。需传入:轮播容器的类名,轮播组件详细功能的对象
    var that = this
    this.dom = new Swiper('.' + that.swiperId, {
      // 循环
      loop: that.loop,
      // 分页器
      pagination: {
        el: '.swiper-pagination',
        bulletClass: 'swiper-pagination-bullet'
      },
      // 分页类型
      paginationType: that.paginationType,
      // 自动播放
      autoPlay: that.autoPlay,
      // 方向
      direction: that.direction,
      // 特效
      effect: that.effect,
      // 用户操作swiper之后,不禁止autoplay
      disableOnInteraction: false,
      // 修改swiper自己或子元素时,自动初始化swiper
      observer: true,
      // 修改swiper的父元素时,自动初始化swiper
      observeParents: true
    })
  }
}
</script>

Swiper.vue模块 style

<style lang="scss" scoped>
  .swiper-wrapper {
    // 使得图片宽度适应显示
    img { 
      width: 100%
    }
  }
  // 分页器中当前小圆点的类名
  .swiper-pagination-bullet-active {
  background: #fff;
  }
  // 分页器的类名
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 1rem;
    width: 95%;
    text-align: right;
  }
</style>

HTML 子组件调用Swiper.vue轮播组件 template

<template>
  <div>
    <!-- 轮播图 -->
    <swiper swiperId="swiper" effect="slide">
      <div class='swiper-slide' v-for='data in slidelist' :key='data.bannerId' slot="swiper-slot">
        <img :src="data.imgUrl" />
      </div>
    </swiper>
  </div>
</template>

HTML子组件调用Swiper.vue轮播组件 script

<script>
// 引入封装的swiper
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
export default {
  // 轮播图列表
  data () {
    return {
      slidelist: []
    }
  },
  components: {
    swiper
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=310100&k=6324612',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1580884372519691043891","bc":"500100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.slidelist = res.data.data
    })
  }
}
</script>