VAVABUY/components/swiper.vue

<template>
  <swiper
    :current="current"
    @change="swiperChange"
    :indicator-dots="indicatorDots"
    :indicator-color="indicatorColor"
    :indicator-active-color="indicatorActiveColor"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
    :circular="circular"
    :vertical="vertical"
    class="swiper_list"
    :style="{ width: width, height: height, '--borderRadius': borderRadius }"
  >
    <template v-if="listArr.length">
      <swiper-item
        v-for="(item, index) in listArr"
        :key="index"
        style="overflow-y: scroll"
      >
        <slot :name="'item_' + index">
          <image
            class="img"
            lazy-load
            :src="urlName ? item[urlName] : item"
            alt=""
            :style="{ width: width, height: height }"
          >
          </image>
        </slot>
      </swiper-item>
    </template>
    <template v-else-if="swiperList.length">
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        @click="itemClick(item)"
      >
        <slot name="swiper">
          <image
            class="img"
            lazy-load
            :src="urlName ? item[urlName] : item"
            alt=""
            :style="{ width: width, height: height }"
          >
          </image>
        </slot>
      </swiper-item>
    </template>
    <slot name="cont"></slot>
  </swiper>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useSystemStore } from "@/store";
const useSystem = useSystemStore();

const props = defineProps({
  indicatorDots: Boolean,
  indicatorColor: {
    type: String,
    default: "rgba(0, 0, 0, .3)",
  },
  indicatorActiveColor: {
    type: String,
    default: "#000000",
  },
  autoplay: Boolean,
  interval: {
    type: Number,
    default: 3000,
  },
  duration: {
    type: Number,
    default: 500,
  },
  circular: Boolean,
  vertical: Boolean,
  urlName: {
    type: String,
    default: "picture",
  },
  listArr: {
    type: Array,
    default: () => [],
  },
  current: {
    type: Number,
    default: 0,
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "175px",
  },
  borderRadius: {
    type: String,
    default: "8px",
  },
});

const emit = defineEmits(["change", "itemClick"]);

const swiperList = computed(() => !props.listArr.length && useSystem.getBanner);

const swiperChange = (e) => {
  emit("change", e.detail);
};
const itemClick = (e) => {
  emit("itemClick", e);
};

onMounted(() => {
  useSystem.setBanner();
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.swiper_list {
  border-radius: var(--borderRadius);
  overflow: hidden;

  .img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--borderRadius);
  }
}
</style>