背景：
在使用vue框架+element組件的背景下，我們對圖片的展示需要點擊放大(單張)；如果是多張圖片，要支持左右滑動查看多張圖片(多張)。
單張圖片放大，el-image圖片組件，或者原生的img標簽。
多張圖片放大，el-image圖片組件圖片預覽的自定義預覽出效果。
這里也遇到了走馬燈的圖片的放大效果，給圖片綁定了一個自定義的點擊事件@click，用來解決走馬燈的放大效果。
走馬燈效果點擊放大，Carousel走馬燈，el-carousel。
走馬燈單張放大實現了。。。
走馬燈多張放大切換沒有實現。。。
一、單張圖片點擊放大
el-image組件：
效果展示：
核心代碼：
使用element組件，其中的?el-image圖片組件
//組件屬性綁定:preview-src-list屬性<el-imagev-if="item.photo"class="img-style":src="BASEUrl + '/file/' + item.photo":zoom-rate="1.2":max-scale="7":min-scale="0.2":preview-src-list="[BASEUrl + '/file/' + item.photo]"show-progress:initial-index="4"fit="cover"/>接口數據：
//接口數據
[{"pid": 51,"cname": "川蓬安渡0012","name": "川蓬安渡0012","mmsi": 415931252,"carryPassengersNum": 15,"status": 2,"photo": "shipPhoto/9a80f083-32a7-41ee-b508-46c3cf385372.jpg",},{"pid": 52,"cname": "川蓬安渡0011","name": "川蓬安渡0011","mmsi": 415931259,"carryPassengersNum": 15,"status": 2,"photo": "shipPhoto/4cee0bbb-1b91-494d-a546-fff012fa96be.jpg",},{"pid": 78,"cname": "測試渡船","name": "測試渡船","mmsi": 432781135,"carryPassengersNum": 29,"status": -1,"photo": "shipPhoto/6c505716-d5e8-447d-9fe6-f41879a9a9a3.png",},{"pid": 79,"cname": "測試渡船1136","name": "測試渡船1136","mmsi": 432781136,"carryPassengersNum": 39,"status": -1,"photo": "shipPhoto/2b3816e5-d2a8-4caf-80ab-a714f68a12d8.jpg",}
]?組件官網：點擊跳轉
?el-carousel組件：
效果展示：
核心代碼：
//自定義一個點擊事件@click="handleClick(item)"
<template><el-carousel:interval="5000"arrow="always"height="190px"@change="imgChange"trigger="click"><el-carousel-itemv-for="(item, index) of state.repairData":key="index"><div class="img-box"><imgstyle="width: 100%; height: 100%":src="item.file"alt="一張圖"@click="handleClick(item)"/></div></el-carousel-item></el-carousel>
//圖片預覽，絕對布局相對于系統，所以放在走馬燈標簽外面<el-image-viewerv-if="showPreview":url-list="[state.imgSrc]"show-progress@close="showPreview = false"/>
</template>遇見的問題：
問題描述：
圖片放大的效果是放大在走馬燈組件內部，沒有放大到系統
問題展示：?
圖片放大的效果是放大在走馬燈組件內部，沒有放大到系統；解決辦法：查看圖片預覽組件的position等位屬性，查看父子標簽的位置屬性。
可以發現的是el-image-viewer標簽是絕對定位，
解決辦法：
總結：
?二、多張圖片放大
el-image組件：
官網鏈接：點擊跳轉
el-carousel組件：
組件官網：點擊跳轉
el-carousel組件本身并沒有click點擊的事件。。。
自定義click事件：?
嘗試自己用el-image-viewer組件綁定一個數組，實現效果不好，圖片加載失敗，經過多次排查哈錯誤原因：1、是否是圖片跨域，圖片本身不能加載成功；2、百度。發現可能是觸發了vue的透傳機制，目前解決不了?
?
失敗思路：
我想的是el-image-viewer組件可以綁定一個數組的話，我就給它綁定一個數組。但是出現了問題，圖片也加載失敗?，
[Vue warn]: Extraneous non-props attributes (show-progress) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.?
[Vue warn]: 額外的非道具屬性（顯示進度）被傳遞給組件，但無法自動繼承，因為組件渲染片段或文本或傳送根節點。
很明顯是你無意操作，無意觸發了Vue3透傳Attributes機制才沒有出現報錯，可當你的子組件中有多個根節點時，Vue使用透傳Attributes機制也沒有辦法確定要在哪一個根節點繼承屬性時，就報出了上訴警告。
vue透傳：點擊跳轉
寫到這兒。。。多張圖片放大的效果暫時不做了。。。
大概問題出在走馬燈組件和圖片組件之間的點擊事件，用戶鼠標點擊的時候觸發了vue3的透傳
