前言

图片预览面板就是非弹窗版的预览图片，用于嵌在页面内预览图片，相关Api请查看Element文档

效果

效果源码

源码

<script setup lang="ts">
import { ElImageViewer } from 'element-plus'
import { computed, onUnmounted, ref, useAttrs } from 'vue'
import type { ImageViewerProps } from 'element-plus'

type Props = Partial<Omit<ImageViewerProps, 'closeOnPressEscape' | 'hideOnClickModal' | 'teleported'> & {
  width: string
  height: string
}>
const props = withDefaults(defineProps<Props>(), {
  infinite: true,
  initialIndex: 0,
  width: '500px',
  height: '400px',
  zoomRate: 1.2,
})

const attrs = useAttrs()

const viewerProps = computed(() => {
  const { width, height, ...rest } = {
    ...attrs,
    ...props,
  }
  return rest
})

const isEnter = ref(false)
const zoomRateVal = computed(() => isEnter.value ? props.zoomRate : 1)

const wheelListener = (ev: Event) => {
  isEnter.value && ev.preventDefault()
}

document.addEventListener('wheel', wheelListener, { passive: false })

onUnmounted(() => {
  document.removeEventListener('wheel', wheelListener)
})

const mouseenter = () => {
  isEnter.value = true
}
const mouseleave = () => {
  isEnter.value = false
}

const imageViewer = ref<InstanceType<typeof ElImageViewer>>()
defineExpose({
  setActiveItem: (i: number) => imageViewer.value?.setActiveItem(i),
})
</script>


<template>
  <div
    class="preview-image-viewer-container"
    :style="{
      width,
      height,
    }"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <ElImageViewer
      ref="imageViewer"
      v-bind="viewerProps"
      :zoom-rate="zoomRateVal"
      :close-on-press-escape="false"
      :hide-on-click-modal="false"
      :teleported="false"
    />
  </div>

</template>

<style lang="scss">
.preview-image-viewer-container {
  transform: scale(1);
  overflow: hidden;

  .el-image-viewer__close {
    display: none;
  }
}
</style>

注意

不支持属性：close-on-press-escape teleported hide-on-click-modal
不支持的事件：close

结语

感谢您的耐心阅读，如果觉得这篇文章对您有帮助和启发，麻烦给个大大的赞~