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

NaughtyBo

已于 2023-07-15 09:08:33 修改

阅读量4.4k

点赞数 2

分类专栏：前端学习文章标签： vue.js javascript 前端

于 2023-07-12 11:41:43 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/131678181

版权

前端学习专栏收录该内容

148 篇文章

订阅专栏

在这里插入图片描述

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

<template>
	
    <div class="preview-box">
        <!-- 第一种: 使用el-image - 通过点击小图, 然后预览大图, 这是官方文档提供的方法 -->
        <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-image-viewer
            1. 必须使用v-if来控制预览效果的显示和隐藏,不能使用v-show(使用v-show无效)
            2. 需要监听close事件, 当点击蒙层 或 关闭按钮时, 会触发close事件, 此时需要手动关闭预览, 否则预览不会关闭
            3. initial-index属性为显示图片的索引
        -->
        <el-button @click="showImage(0)">显示图片0</el-button>
        <el-button @click="showImage(1)">显示图片1</el-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>