el-image-viewer的使用

el-image-viewer 是 Element UI 中的图片预览组件，可以实现图片的放大、缩小、旋转等操作，下面是它的使用方法：

1. 安装 Element UI

在使用 el-image-viewer 之前，需要先在你的项目中安装 Element UI，可以使用 npm 或 yarn 进行安装。

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

# 或使用 yarn 安装
yarn add element-ui

2. 引入 el-image-viewer 组件

在需要使用 el-image-viewer 的组件中，引入 el-image-viewer 组件。

import { Image,ImageViewer } from 'element-ui';

3. 使用 el-image-viewer 组件

在需要使用 el-image-viewer 的地方，使用 el-image-viewer 标签包裹 Image 组件，并将需要展示的图片的 URL 作为 Image 组件的属性传入。

<template>
  <div>
    <el-image-viewer :url="imageUrl">
      <el-image :src="imageUrl"></el-image>
    </el-image-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://xxx.com/image.png'
    }
  }
}
</script>

这样就完成了 el-image-viewer 组件的基本使用。需要注意的是，el-image-viewer 组件需要和 el-image 组件一起使用，而且必须将 el-image 组件放在 el-image-viewer 组件内部。