vue3 使用swiper异形的slide

在Vue3中使用Swiper创建异形滑块，首先你需要安装Swiper库及其Vue的集成版本，如`vue-awesome-swiper`。以下是一个简单的步骤来设置异形滑块：

1. **安装依赖**:
安装 `vue-awesome-swiper` 和可能需要的其他样式库，如 `@/styles/swiper.scss` 或者通过npm或yarn:

   npm install swiper vue-awesome-swiper --save

2. **在组件中引入并配置Swiper**:
在组件模板 (`template`) 中引入Swiper，并在组件的data里定义相关配置，比如异形布局模式:

   <template>
     <div class="swiper-container">
       <swiper :options="swiperOptions" @slideChange="onSlideChange">
         <swiper-slide v-for="(item, index) in items" :key="index" :style="{ background: 'url(' + item.url + ')' }">
           <!-- 根据图片尺寸和形状自适应CSS -->
           <div :style="{ width: item.width, height: item.height, borderRadius: 'calc(50% - var(--border-radius))' }"></div>
         </swiper-slide>
       </swiper>
     </div>
   </template>

3. **数据绑定与方法定义**:

   import { swiper, swiperSlide } from "vue-awesome-swiper";

   export default {
     components: {
       swiper,
       swiperSlide
     },
     data() {
       return {
         swiperOptions: {
           // Swiper基本选项
           centeredSlides: true, // 开启居中滑块
           slidesPerView: 'auto', // 自动适应
           spaceBetween: 0,
           loop: false, // 如果不需要无限循环
           breakpoints: {
             // 更换不同设备下的样式
             '768px': { slidesPerView: 'auto' }, // 移动端适配
             '992px': { slidesPerView: 3 },
             '1194px': { slidesPerView: 4 }
           },
         },
         items: [
           { url: 'path/to/image1.jpg', width: '200px', height: '300px', borderRadius: '50%' },
           ... // 其他异形图片信息
         ],
         onSlideChange(index) {
           console.log(`当前显示的滑块索引：${index}`);
         }
       };
     }
   };

4. **样式定制**:
确保在项目的全局样式文件或者组件内添加必要的CSS来调整滑块和内容的外观，包括边框圆角等。