# vue-magnifier-ting

**Repository Path**: Tina_yu/vue-magnifier-ting

## Basic Information

- **Project Name**: vue-magnifier-ting
- **Description**: 基于vue, 放大镜，鼠标或按钮缩放组件，并可标记定点功能
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-10-18
- **Last Updated**: 2023-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-magnifier-ting

> 基于 vue, 包含放大镜，鼠标或按钮缩放组件，并可标记定点功能

## Build Setup

```bash
# install dependencies
npm install vue-magnifier-ting

# 项目启动
npm run dev

node >= 14.15.0
```

## 用法

### Attributes

| 属性                     | 说明                                         |     类型      |          默认值          |
| :----------------------- | :------------------------------------------- | :-----------: | :----------------------: |
| isGlass                  | 是否启用放大镜效果，默认为滚动放大缩小组件   |    boolean    |          false           |
| imgUrl                   | 图片地址，必填                               |    string     |            --            |
| width                    | 可视区域容器的宽度                           | number/string |           100%           |
| height                   | 可视区域容器的高度                           | number/string |           100%           |
| --                       | 以下属性均为 isGlass: true 的情况下配置生效  |
| glassOption              | 放大镜的参数                                 |    Object     | { width, height: scale } |
| glassOption.width        | 鼠标右侧放大镜的宽度                         |    number     |           150            |
| glassOption.height       | 鼠标右侧放大镜的高度                         |    number     |           150            |
| glassOption.scale        | 放大比例                                     |    number     |            2             |
| --                       | 以下属性均为 isGlass: false 的情况下配置生效 |
| isNeedPoint              | 是否需要添加标记点                           |    boolean    |          false           |
| spots                    | 标记点信息                                   |     array     |            []            |
| spots[i].left            | 标记点的 left 定位信息                       |    number     |            --            |
| spots[i].top             | 标记点的 top 定位信息                        |    number     |            --            |
| spots[i].iconUrl         | 标记点的 icon 地址                           |    string     |         默认图片         |
| spots[i].title           | 标记点的标题                                 |    string     |            --            |
| scaleOption              | 放大缩小参数                                 |    Object     |            {}            |
| scaleOption.isMousewheel | 是否鼠标滚动放大缩小                         |    boolean    |           true           |
| scaleOption.maxScale     | 放大的最大倍数                               |    number     |            10            |
| scaleOption.minScale     | 缩小的最小倍数                               |    number     |           0.5            |

### Methods，isGlass: false 的情况下配置生效

| 方法名       | 说明               | 参数                                                                                     |
| :----------- | :----------------- | :--------------------------------------------------------------------------------------- |
| handleZoom   | 缩放图片方法       | (type, scale) type 类型为 enlarged（放大）或者 reduce（缩小）, scale，缩放比例，默认 0.2 |
| handleRotate | 旋转图片方法       | --                                                                                       |
| handleRest   | 图片还原为初始状态 | --                                                                                       |

### Events，isGlass: false 的情况下配置生效

| 事件名称       | 说明             | 回调参数                                          |
| :------------- | :--------------- | :------------------------------------------------ |
| click-point    | 点击标记点       | 传递给 spots 属性的数组中，该标记节点所对应的对象 |
| dblclick-point | 双击图中任意位子 | { top, left } 图片标记点的定位                    |

### 源码

https://gitee.com/Tina_yu/vue-magnifier-ting