问使用Vue3 option的SwiperJs滑块示例

EN

<template>
  <div
    :id="id"
    class="swiper-container"
  >
    <div
      class="swiper-wrapper"
      @click="$emit('click')"
    >
      <!-- swipe right template -->
      <template v-if="direction === 'right'">
        <v-list-item class="swiper-slide" />
        <v-list-item class="swiper-slide">
          <v-list-item-content>
            <slot />
          </v-list-item-content>
        </v-list-item>
      </template>

      <!-- swipe left template -->
      <template v-if="direction === 'left'">
        <v-list-item class="swiper-slide">
          <v-list-item-content>
            <slot />
          </v-list-item-content>
        </v-list-item>
        <v-list-item class="swiper-slide" />
      </template>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.min.css';
import { Swiper } from 'swiper/dist/js/swiper.esm.js';

export default
{
  props:
  {
    id:
      {
        type: [String, Number],
        required: true
      },
    direction:
    {
      type: String,
      default: 'right',
      validator: value => ['right', 'left'].indexOf(value) !== -1
    }
  },
  mounted () {
    const self = this;
    const el = '#' + this.id;
    const direction = this.direction;

    // Initialize Swiper
    const swiper = new Swiper(el, {
      initialSlide: this.direction === 'left' ? 0 : 1,
      resistanceRatio: 0,
      speed: 150,
      observer: true,
      observeParents: true,
    });

    // Event will be fired after transition
    swiper.on('transitionEnd', function () {
      const activeIndex = this.activeIndex;
      if ((direction === 'right' && activeIndex === 0) || (direction === 'left' && activeIndex === 1)) {
        self.$emit('swiped');
        // Destroy slider instance and detach all events listeners
        this.destroy();
      }
    });
  }
};
</script>

<template>
 
 <swiper
    :slides-per-view="4"
    :space-between="30"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    class="default-slider"
  >
    <swiper-slide v-for="item in items" :key="item">
        <img :src="item" />
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
        return {
            items: ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg']
        }
    }
}
</script>