vue使用vant组件二次封装轮播图swipe

<template>
  <!-- vant方案 -->
  <!-- <div class="vant_container"> -->
  <van-swipe
    class="my-swipe"
    ref="swipe"
    :height="boxHeight"
    :width="boxWidth"
    :autoplay="autoplay"
    :duration="duration"
    :loop="loop"
    :vertical="vertical"
    :showPager="showPager"
    @change="onChange"
    @click="clickEvent"
    :style="{
      borderRadius: borderRadius,

      backgroundColor: boxBackgroundColor,
    }"
  >
    <van-swipe-item v-for="(image, index) in listImg" :key="index">
      <img :src="image.url" />
    </van-swipe-item>
  </van-swipe>
  <!-- </div> -->
</template>

<script>
export default {
  props: {
    // 圆角
    borderRadius: {
      type: String,
      default: '0',
    },
    // 轮播图宽度
    boxWidth: {
      type: String,
      default: '100%',
    },
    // 轮播图高度
    boxHeight: {
      type: String,
      default: '150rem',
    },
    // 轮播图背景色
    boxBackgroundColor: {
      type: String,
      default: 'transparent',
    },
    // 自动轮播间隔，单位为 ms
    autoplay: {
      type: Number,
      default: 3000,
    },
    // 动画时长
    duration: {
      type: Number,
      default: 500,
    },
    // 是否开启循环播放
    loop: {
      type: Boolean,
      default: true,
    },
    // 是否为纵向滚动
    vertical: {
      type: Boolean,
      default: false,
    },
    // 轮播数组
    listImg: {
      type: Array,
      required: true,
    },
    // 是否展示分页器
    showPager: {
      type: Boolean,
      default: false,
    },
    // 每一页轮播结束后触发
    onChange: {
      type: Function,
      default: () => {},
    },
    // 点击时触发
    clickEvent: {
      type: Function,
      default: () => {},
    },
    // 切换到上一轮播
    prevEvent: {
      type: Function,
      default: () => {},
    },
    // 切换到下一轮播
    nextEvent: {
      type: Function,
      default: () => {},
    },
    // 切换到指定位置（index: number, options: Options）
    swipeTo: {
      type: Function,
      default: () => {},
    },
    // 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘
    resize: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
    }
  },
  created() {},
  mounted() {
    if (this.showPager) {
      this.$nextTick(function() {
        this.indicatorsShow()
      })
    }
  },
  methods: {
    //  是否展示分页器
    indicatorsShow() {
      var otherComment = document.getElementsByClassName(
        'van-swipe__indicators'
      )
      otherComment[0].remove('van-swipe__indicators')
    },
  },
}
</script>

<style scoped lang="scss">
.vant_container {
  width: 100%;
  height: 100vh;
}
.my-swipe {
  width: 100%;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20rem;
  line-height: 150rem;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>