el-image-viewer图片预览使用

el-image-viewer 是 Element UI 提供的图片查看器组件，用于放大查看图片，支持缩放、拖拽、多图浏览等。以下是使用方法：

安装 Element UI

若未安装 Element UI，使用以下命令安装：

# 使用 npm
npm install element-ui --save

# 使用 yarn
yarn add element-ui

注册组件

在 main.js 中全局注册 el-image-viewer：

import Vue from 'vue';
import { ElImageViewer } from 'element-ui';

Vue.component('el-image-viewer', ElImageViewer);

在模板中使用

在 Vue 组件模板中添加 el-image-viewer：

<template>
  <div>
    <el-button @click="showImageViewer">查看大图</el-button>
    <el-image-viewer
      v-if="showing"
      :url-list="imageUrls"
      :initial-index="initialIndex"
      :on-close="closeImageViewer"
    ></el-image-viewer>
  </div>
</template>

添加脚本

在 <script> 部分定义数据和逻辑：

<script>
export default {
  data() {
    return {
      showing: false, // 控制查看器显示
      imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
      ],
      initialIndex: 0, // 初始显示的图片索引
    };
  },
  methods: {
    showImageViewer() {
      this.showing = true;
    },
    closeImageViewer() {
      this.showing = false;
    },
  },
};
</script>

样式调整（可选）

根据需要，可在 CSS 中自定义查看器的样式。

通过以上步骤，即可在 Vue 项目中使用 el-image-viewer 实现图片预览功能。