加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
README.md

vue-photo-zoom-pro

Vue(2.x) 图片放大器(Photoloupe)

example

DEMO

demo

Usage example


npm install vue-photo-zoom-pro

main.js

import VuePhotoZoomPro from 'vue-photo-zoom-pro'

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 build

License

MIT

Copyright (c) 2018-present, Mater1996

项目简介

🚀 Github 镜像仓库 🚀

源项目地址

https://github.com/Mater1996/vue-photo-zoom-pro

发行版本

当前项目没有发行版本

贡献者 3

开发语言

  • Vue 71.9 %
  • JavaScript 17.3 %
  • HTML 10.9 %