vue vue3 走马灯Carousel
背景：
在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。
实现效果：
官网链接：点击跳转
核心代码：
<el-carousel
style="width: 100%; height: 100%"
:interval="5000"
:trigger="'click'"
:indicator-position="'none'"
>
<el-carousel-item
v-for="(item, index) of state.ferryPortdata.photoList"
:key="index"
>
<div class="aspect-container">
<el-image
class="carousel-image"
:src="BASEUrl + '/file/' + item.file"
:preview-src-list="[BASEUrl + '/file/' + item.file]"
:preview-teleported="true"
alt=""
fit="cover"
/>
</div>
</el-carousel-item>
</el-carousel>组件的属性：
走马灯组件的属性，如下：
autoplay：是否自动切换。默认值true
interval：自动切换的时间间隔，单位为毫秒。默认值3000
trigger：指示器的触发方式。属性值：'hover' | 'click' 。默认值hover
indicator-position：指示器的位置。属性值3种：'' | 'none' | 'outside'
默认情况下，它会显示在走马灯内部，设置为
outside则会显示在外部；设置为none则不会显示指示器。
el-image图片组件的属性，如下：
src ：图片源地址
fit：图片如何适应容器框。属性值：'' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
preview-src-list：开启图片预览功能。string[]
preview-teleported：image-viewer 是否插入至 body 元素上。
嵌套的父元素属性会发生修改时应该将此属性设置为
true【即图片放大到全局】
写到这儿。。。走马灯轮播图的效果就实现了。。。
下面是走马灯的图片的点击放大效果。
走马灯点击放大：
思路如下：
走马灯的图片点击放大实现思路如下：：
1、查看走马灯组件是否有click点击事件。
2、自定义一个click事件，绑定在图片身上，当点击图片触发图片放大的效果 。
3、el-image图片组件，图片点击放大的属性且放大到全局。推荐用法！！！
1、走马灯组件是否有点击事件：
通过访问走马灯组件的官网知道，走马灯没有相应的点击事件
2、自定义图片的点击事件：
给走马灯组件内部的每一张图片绑定click自定义事件，自定义事件实现图片放大效果
实现效果：
核心代码：
点击事件：
const showPreview = ref(false);
const handleClick = (data) => {
showPreview.value = true;
state.imgSrc = BASEUrl + "/file/" + data.file;
};图片预览组件：
//图片预览el-image-viewer组件
//state.imgSrc是每次点击图片的地址
<el-image-viewer
v-if="showPreview"
:url-list="[state.imgSrc]"
@close="showPreview = false"
/>图片预览官网链接：点击跳转
3、el-image图片组件的点击放大【推荐】：
实现效果：
图片能够实现点击放大，并且放大到全局。放大到全局需要设置el-image的一个属性preview-teleported=“true”，用于控制image-viewer 是否插入至 body 元素上。
官网链接：点击跳转
未设置效果：
设置代码及效果：
//el-image图片预览效果，image-viewer相对于标签body
//:preview-teleported="true"
<el-image
v-if="state.sixNoData.photo"
class="img-style"
:src="BASEUrl + '/file/' + state.sixNoData.photo"
alt=""
fit="cover"
:preview-src-list="[BASEUrl + '/file/' + state.sixNoData.photo]"
:preview-teleported="true"
/>备注：
问：走马灯组件和图片预览组件的代码应该怎么组合使用？
走马灯组件和图片预览组件放置在同级，如下：
不能这样放：
问题：图片为什么显示加载失败？
答：图片涉及到了跨域处理，前端做了对一个图片地址src的访问代理。
接口返回的数据如下：
other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg
前端能够展示的src形式是：
/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg是文件存放路径
BASEUrl + '/file/' + item.file
即：
/apiproxy/pa/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg
/apiproxy/pa是前端代理
问题：state.ferryPortdata.photoList响应式变量的数据结构是什么样的？
答：是接口返回的数据，其中涉及到的数据，示例如下：
//涉及到的数据
[
{
"pid": 142,
"category": null,
"type": 6,
"file": "other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg",
"associationId": 119,
"dateOfIssue": "2025-03-13 14:06:45",
"deadline": null,
"isValid": null
},
{
"pid": 143,
"category": null,
"type": 6,
"file": "other/e1ce36cc-7085-490c-bb9d-b4589590c751.jpg",
"associationId": 119,
"dateOfIssue": "2025-03-13 14:06:45",
"deadline": null,
"isValid": null
},
{
"pid": 144,
"category": null,
"type": 6,
"file": "other/c2fc72b8-ec93-4f4d-bdaf-866fe8e3ad31.jpg",
"associationId": 119,
"dateOfIssue": "2025-03-13 14:06:45",
"deadline": null,
"isValid": null
},
{
"pid": 145,
"category": null,
"type": 6,
"file": "other/a091bb95-66c3-4870-84ce-a9d34a0f81a1.jpg",
"associationId": 119,
"dateOfIssue": "2025-03-13 14:06:45",
"deadline": null,
"isValid": null
},
{
"pid": 146,
"category": null,
"type": 6,
"file": "other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg",
"associationId": 119,
"dateOfIssue": "2025-03-13 14:06:45",
"deadline": null,
"isValid": null
}
]