vue-photo-zoom-pro
Vue(2.x) 图片放大器(Photoloupe)
DEMO
Usage example
npm install vue-photo-zoom-pro-kxmain.js
import VuePhotoZoomPro from 'vue-photo-zoom-pro-kx'
Vue.use(VuePhotoZoomPro)*.vue
<vue-photo-zoom-pro
url="https://bpic.588ku.com/illus_water_img/18/07/30/f3c7060bc28216271dc8c4630b288331.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true"
></vue-photo-zoom-pro>Settings
props
| Prop Name | Type | Default | Note |
|---|---|---|---|
| url | String | 图片地址(photo url) | |
| high-url | String | 更清晰的图片,若不提供会采用 url(more detailed photo url) | |
| scale | Number | 2 | 放大倍数(scale number) |
| disabled | Boolean | false | 禁用 |
| width | Number | 166 | 内部放大区域宽度(width of internal amplification region) |
| height | Number | -1 | 内部放大区域高度，如果不设置或者小于 0 会和宽度保持同步(height of internal amplification region) |
| type | String | square | 放大镜类型(circle,square)(magnifying glass type (circle,square)) |
| zoomer-style | Object | {} | 内部放大区域样式(style of internal amplification region) |
| out-zoomer-style | Object | {} | 外部放大区域样式(style of external amplification region) |
| selector | Boolean | true | 是否显示选择器(show or remove selector) |
| out-zoomer | Boolean | false | 切换内外部放大镜(amplification region will be displayed on the outside) |
| mask | Boolean | true | 显示遮罩 (show mask) |
| mask-color | Color | {} | 遮罩的颜色 |
| pointer | Boolean | false | 外部区域的中心点 (the center of an external area) |
| baseline | Boolean | false | 外部区域的基线 (the baseline of the external area) |
| enter-event | Object/UIEvent | null | 当需要在外部监听鼠标移入事件时，请通过该字段传入事件(When you need to listen for enter events outside the component) |
| move-event | Object/UIEvent | null | 当需要在外部监听移动事件时,请通过该字段传入事件（必须包含 pageX,pageY,clientY），这将禁用内部移动监听(when you need to listen for moving events outside the component) |
| leave-event | Object/UIEvent | null | 当需要在外部监听离开事件时，请通过该字段传入事件(When you need to listen for leaving events outside the component) |
| disabled-reactive | Boolean | false | 禁用响应式，不会轮询图像的位置,在确定不改变布局的情况下使用可以提升性能 |
Slot
| Slot Name | Note |
|---|---|
| default | 默认区域(default) |
| zoomer | 内部放大区域 |
| outzoomer | 外部放大区域 |
Method
| Method Name | Note |
|---|---|
| reset | 重置放大镜位置(reset zoom position) |
Event
| Event Name | Note | event |
|---|---|---|
| created | 图片放大镜创建(photo-zoom created) | 图像属性(img rect{top,left,width,height}),图像元素(img element) |
| mouseenter | 鼠标移入事件 | |
| mousemove | 鼠标移动事件 | |
| mouseleave | 鼠标移出事件 |
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildLicense
Copyright (c) 2018-present, Mater1996
原作者xhb 修改图片溢出固定盒子的bug