elementplus图片预览

Element Plus提供了一个名为`el-image-viewer`的组件用于图片预览。该组件不在官方文档上，但可以像普通组件一样使用。你可以使用`<el-image-viewer/>`标签来引入这个组件。

除了`el-image-viewer`组件外，还可以使用其他封装的组件来实现图片预览。例如，可以使用`ImgPreview`组件来显示预览图片。你可以通过`v-model`和`:imgs`属性来控制组件的显示和传递图片地址。

如果你想要自己封装一个组件来实现图片预览，可以按照以下步骤进行操作：

1. 创建一个包含`<el-image-viewer>`组件的模板，该组件的显示与隐藏通过`state.visible`控制。并将要预览的图片数组传递给`url-list`属性。
2. 在脚本部分，使用`reactive`创建一个响应式对象`state`，包含`visible`属性和一个用于关闭预览的方法`close`。
3. 在组件使用时，将需要预览的图片传递给`imgs`属性。

具体代码如下所示：

<template>
  <div class="img-viewer-box">
    <el-image-viewer v-if="state.visible" :url-list="props.imgs" @close="close" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useVModel } from '@vueuse/core'

const props = defineProps<{ modelValue: boolean;