- vue2+element -ui中
<el-image-viewer v-if="show" :url-list="url" :on-close="closeViewer" />注意是on-close
- vue3+element-plus中
就是close url-list：圖片陣列
getFullImageURL為圖片地址處理函式
<el-image-viewer v-if="show" :url-list="url" @close="closeViewer" /> <template v-for="(item, index) in list" :key="index" > <img v-if="index == 0" class="item-img" :src="item" @click="onPreview(list, index)" /> </template>//預覽大圖 const onPreview = (url, index) => { debugger if (!index && index != 0) state.url = [state.getFullImageURL(url)] else { let list = [] for (var i = 0; i < url.length; i++) { list.push(getFullImageURL(url[i].url ? url[i].url : url[i])) } state.url = list.slice(index).concat(list.slice(0, index)) } state.show = true } // 關閉查看器 const closeViewer = () => { state.show = false }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303696.html
標籤：其他
上一篇：C# 之 多執行緒 -- 任務概念以及使用示例 ( Task | TaskCompletionSource | Async | Await )