vue3-基于element-plus的图片预览封装

发表于 | 分类于 ，

有时候在表格中需要直接点击一个按钮预览图片，element-plus中的图片组件就不方便使用了，所以做了一个简单的封装。

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div v-if="imgList.length">
    <span @click.stop="showViewer = true" v-if="slots.length == 0">预览</span>
    <div v-else @click="showViewer = true">
      <slot :data="imgList"></slot>
    </div>
  </div>
  <teleport to="body">
    <el-image-viewer v-if="showViewer" @close="showViewer = false" :url-list="imgList" :hide-on-click-modal="true" />
  </teleport>
</template>
<script setup>
import { computed } from 'vue';
const slots = Object.values(useSlots())
const props = defineProps({
  imgUrl: ""
})
const imgList = computed(() => {
  if (!props.imgUrl) {
    return []
  }
  if (typeof props.imgUrl == 'string') {
    return props.imgUrl ? props.imgUrl.split(',') : []
  } else {
    return props.imgUrl
  }
})
const showViewer = ref(false)
</script>
<style lang="scss" scoped>
span {
  cursor: pointer;
  color: #0052f5
}
</style>

使用方式

  • 引入一：

    1
    <preview-img :imgUrl="[url,url,url]"></preview-img>

  • 引入二：

    1
    2
    3
    4
    5
    <preview-img :imgUrl="url,url,url">
      <template #default="{data}">//data就是传入的imgList，其实没必要传递出来的，外部本身就可以获取
      <div>预览</div>
      </template>
    </preview-img>

    ​

imgUrl类型可以是数组，英文逗号链接的字符串两种类型