vue3-image-zoom

Vue3 图片放大镜组件

功能特性

• 支持图片放大查看
• 可自定义放大镜大小和放大倍数
• 支持圆形和方形放大镜
• 可显示/隐藏准心
• 放大镜位置可配置（跟随鼠标或在图片旁边）

组件参数

| 参数 | 说明 | 类型 | 默认值 | 必填 | | --------------- | ------------------------------ | ------- | -------------------------- | ---- | | imageUrl | 图片 URL | string | - | 是 | | magnifierSize | 放大镜大小(px) | number | 250 | 否 | | scale | 放大倍数 | number | 2 | 否 | | shape | 放大镜形状('circle'或'square') | string | 'circle' | 否 | | showCrosshair | 是否显示准心 | boolean | true | 否 | | enabled | 是否启用放大镜 | boolean | true | 否 | | position | 放大镜位置('follow'或'side') | string | 'follow' | 否 | | borderStyle | 放大镜边框样式 | string | '2px solid #bebebe' | 否 | | backgroundColor | 放大镜背景色 | string | 'rgba(255, 255, 255, 0.8)' | 否 |

使用案例

<script setup lang="ts">
import { Vue3ImageZoom } from "vue3-image-zoom";
import "vue3-image-zoom/dist/style.css";
import imageUrl from "your image";
</script>

<template>
  <div class="container">
    <Vue3ImageZoom
      :imageUrl="imageUrl"
      :magnifier-size="250"
      :scale="2"
      shape="circle"
      show-crosshair
      position="follow"
    ></Vue3ImageZoom>
  </div>
</template>

安装

npm install vue3-image-zoom