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 | [] | | 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