common/src/components/frame/swiper-frame.vue

<template>
  <div id="swiper-frame">
    <div class="container">
      <div class="swiper-box">
        <swiper ref="mySwiper" :options="options">
          <swiper-slide v-for="(item, index) in list" :key="index">
            <slot v-bind="{ index, item }"></slot>
          </swiper-slide>
          <!-- 分页 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 按钮导航 -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
  name: 'swiper-frame',
  props: {
    // 循环列表
    list: { type: Array, default: () => [] },
    // 配置文件
    options: { type: Object, default: () => {} },
  },
  components: { Swiper, SwiperSlide },
  data: function() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.swiper-box {
  .swiper-container {
    height: 45px;
  }
}
// 选中背景颜色，字颜色
// .swiper-slide-active {
//   background: #ff6600;
//   color: #fff;
// }
// 设定固定值
// .swiper-slide {
//   width: 300px; /*设为固定值*/
//   width: auto; /*根据内容调整宽度*/
// }
// 自定义按钮样式
// .swiper-container {
//   --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
//   --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
//   --swiper-navigation-size: 30px; /* 设置按钮大小 */
// }
</style>