1.vue2+element -ui中
<el-image-viewer
v-if="show"
:url-list="url"
:on-close="closeViewer"
/>
注意是on-close
2. 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/303610.html
標籤：其他