vue3 element-plus 实现图片预览

1. • 效果

2、实现

element-plus下有这么一个组件 <el-image-viewer/>，但是这个组件是没写在文档上面的，像普通组件一样使用即可

可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览

2.1封装组件

<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
  imgs: string[]
}>()
const emits = defineEmits<{
  (e: 'update:modelValue', data: boolean)
}>()
const state = reactive({
  imgList: [],
  // 相当于是set 与 get
  visible: useVModel(props, 'modelValue', emits),
})

// 点击关闭的时候，连同小图一起关闭
function close() {
  state.visible = false
}
</script>

<style scoped></style>

2.3组件使用

在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可

重点是上面的组件封装，看明白就会用了

 <!-- 增加用于显示预览图片 -->
 <ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />