vue3实现 左右两边展示图片，中间展示图片和内容 能点击按钮左右切换 能左右拖拽 左右和中间都是唯一的轮播项的轮播图

在 Vue3 中实现这种布局，你可以使用 Element UI 的 `el-image` 组件配合自定义的滑动组件（如 vant 或者 iview 的轮播组件），结合 `v-model` 和事件监听来达成目标。这里提供一种简化版的思路：

1. 首先，安装所需的库：

   npm install element-ui vant

2. 创建组件结构，包含左右图片和中间区域：

   <template>
     <div class="slider-container">
       <el-image :src="leftImage" class="slide left-slide" @click="switchSlide('left')"></el-image>
       <div class="center-slide" v-if="showCenterSlide">
         <img :src="mainImage" />
         <div class="content">{{ content }}</div>
         <button @click="switchSlide('right')">切换到右侧</button>
       </div>
       <el-image :src="rightImage" class="slide right-slide" :style="{ display: showRightSlide ? 'block' : 'none' }"
                 @dragstart.prevent @dragover.prevent @dragend.prevent @drop.prevent="handleDragEnd"
                 @click="switchSlide('left')"></el-image>
     </div>
   </template>

3. 定义数据和方法：

   export default {
     data() {
       return {
         leftImage: '',
         mainImage: '',
         rightImage: '',
         content: '',
         showCenterSlide: true,
         showRightSlide: false,
       };
     },
     methods: {
       switchSlide(direction) {
         if (direction === 'left') {
           this.showCenterSlide = !this.showCenterSlide;
           this.showRightSlide = false;
         } else {
           // 类似地处理切换到右侧的情况
         }
       },
       handleDragEnd(e) { // 监听拖放结束事件
         // 根据 dragEnd 的数据更新左右滑块位置
       },
     },
   };

4. 样式部分，设置基本布局和动画效果：

   .slider-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 500px; /* 根据需求调整高度 */
   }

   .slide {
     position: relative;
     width: 40%;
     cursor: pointer;
   }

   .left-slide,
   .right-slide {
     transition: transform 0.3s ease-in-out;
   }

   .center-slide {
     width: 20%;
     display: flex;
     justify-content: center;
     align-items: center;
   }

记得根据实际项目需求对样式、交互细节以及滚动效果进行适当的调整。如果你需要的是更复杂的滚动功能，可能需要引入第三方滚动库，例如 Swiper 或者 ScrollX。