2.1.3 • Published 7 months ago
vue-magnifier-ting
基于 vue, 包含放大镜，鼠标或按钮缩放组件，并可标记定点功能
Build Setup
# 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 | [] |
| spotsi.left | 标记点的 left 定位信息 | number | -- |
| spotsi.top | 标记点的 top 定位信息 | number | -- |
| spotsi.iconUrl | 标记点的 icon 地址 | string | 默认图片 |
| spotsi.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