nd_h5/src/components/slider.vue

<template>
  <div class="slider mb-4">
    <swiper v-bind="config" :style="options.style" class="rounded-lg overflow-hidden">
      <slide v-for="(node, index) in options.children" :style="options.slideStyle" :key="index" class="flex">
        <v-image :options="node" class="object-cover w-full"></v-image>
      </slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component';
import Base from './base';

export default {
  name: 'v-slider',
  extends: Base,
  components: {
    Swiper,
    Slide,
  },
  props: {
    options: Object,
  },
  computed: {
    config() {
      return {
        autoPlay: false,
        showIndicator: true,
        interval: 5000,
        duration: 500,
        ...(this.options.config || {})
      }
    }
  }
}
</script>
<style lang="less">
</style>