el-image
<el-image
style="width: 100px; height: 100px"
:src="图片源"
:preview-src-list="开启图片预览功能（预览列表）">
</el-image>
image-viewer
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
vue---html
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
hide-on-click-modal="false"
:url-list="srcList"
:onSwitch="onSwitch"
:initialIndex="initialIndex"
/>
//图片索引
<div class="preview-index" v-if="showViewer">{{ initialIndex +1}} / {{ srcList.length }}</div>
css
.preview-index {
position: fixed;
top: 30px;
z-index: 9999;
left: 50%;
margin-left: -20px;
font-size: 18px;
font-weight: bold;
color:red;
}
js
methods:{
closeViewer() {
this.showViewer = false
},
// 切换图片 index为图片下标值
onSwitch(index) {
this.initialIndex = index
}
}
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| initialIndex | 默认显示的第一张预览图（urlList的下标值） | Number | -- | 0 |
| urlList | 预览图的地址列表 | Array | -- | [] |
| zIndex | 设置图片预览的 z-index | Number | -- | 2000 |
| onClose | 关闭图片预览时的回调函数 | Function | -- | -- |
| onSwitch | 切换上一张下一张图片时的回调函数 | Function | -- | -- |
图.png
