背景：

在項目中需要展示多張圖片，但在頁面上只有一張圖片的有限位置，此時考慮使用輪播圖實現多張圖片的展示。element組件官網有走馬燈Carousel的組件詳細介紹。

實現效果：

官網鏈接：點擊跳轉

核心代碼：

<el-carouselstyle="width: 100%; height: 100%":interval="5000":trigger="'click'":indicator-position="'none'"><el-carousel-itemv-for="(item, index) of state.ferryPortdata.photoList":key="index"><div class="aspect-container"><el-imageclass="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-viewerv-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-imagev-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}
]