# vue3图片放大镜

**Repository Path**: trim33/vue3-image-zoom

## Basic Information

- **Project Name**: vue3图片放大镜
- **Description**: vue3的图片放大镜
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-09
- **Last Updated**: 2024-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# 图片放大镜
- 组件位置：src\components\ImageZoom.vue
- 组件作用：左侧的图片，选择局部位置，放大展现到右侧。


### 调用方式参考
- 位置：src\App.vue
```
  // 引入组件：图片放大镜
  import ImageZoom from './components/ImageZoom.vue'

  /** 当前图片 */
  const imgCurr = ref('');

  使用组件
  <image-zoom :src="imgCurr" :scale="3" />

```


### 参数说明

| 参数名      | 类型       | 默认值 | 说明         |
| ----------- | :----------| :------| :------------|
| src         | String     | ""     | 当前图片     |
| scale       | Number     | 2      | 缩放倍数（有效的缩放倍数，大于1倍的倍数）  |
| parentSize  | Boolean    | true   | [主要展现区域]宽高是否有父类元素宽高决定   |
| width       | Number     | 400    | 宽度 ： parentSize=false 时生效           |
| height      | Number     | 400    | 高度 ： parentSize=false 时生效           |


### 版本依赖
- 当前是 vue3, 需要 @vueuse/core

```
  // 安装
  pnpm i @vueuse/core

  // 当前版本参考
  "@vueuse/core": "^10.9.0",  // 监听：鼠标移动
  "vue": "^3.4.15"
```


### 项目安装

```sh
pnpm install
```

### 项目运行

```sh
pnpm dev
```

### 代码参考
- git clone https://gitee.com/trim33/vue3-image-zoom.git