el-image-viewer图片预览组件使用

• 只需要安装了element-plus即可使用

<template>
	
    <div class="preview-box">
        
        <el-image :preview-src-list="['/api/file/getImage/202307/3178033358P0KiZY3YV2.png',
                                      '/api/file/getImage/202307/3178033358bd1LTA0mLK.png']" 
                   :initial-index="0" 
                   src="/api/file/getImage/202307/3178033358P0KiZY3YV2_.png"/>

        
        <el-button @click="showImage(0)">显示图片0el-button>
        <el-button @click="showImage(1)">显示图片1el-button>
        <el-image-viewer 
            v-if="show" 
            :url-list="['/api/file/getImage/202307/3178033358P0KiZY3YV2.png','/api/file/getImage/202307/3178033358bd1LTA0mLK.png']" 
            :initial-index="initialIndex"
            @close="closeImageViewer" 
            :hide-on-click-modal="true" />
    div>
    
template>

<script setup>

import { ref, reactive } from 'vue'

// 预览图片显示的初始索引
const initialIndex = ref(0)

// 是否展示图片预览
const show = ref(false)

// 显示图片预览的方法
function showImage(idx) {
    initialIndex.value = idx
    show.value = true // 展示预览
}

// 关闭图片预览的方法
function closeImageViewer() {
    show.value = false
}
script>

<style lang="scss">style>