Vue放大镜 VuePhotoZoomPro

最新推荐文章于 2024-10-11 08:11:41 发布

原创最新推荐文章于 2024-10-11 08:11:41 发布 · 3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文详细介绍如何在Vue项目中安装并使用Vue Photo Zoom Pro组件，实现图片局部放大功能。包括npm安装步骤、main.js引入代码、*.vue文件中使用方式及各属性参数说明。

npm install vue-photo-zoom-pro

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

Vue.use(VuePhotoZoomPro)

<vue-photo-zoom-pro url=""></vue-photo-zoom-pro>

Prop	Type	Default	Note
url	String		图片地址(photo url)
high-url	String		更清晰的图片,若不提供会采用 url(more detailed photo url)
scale	Number	3	放大倍数(scale)
width	Number	166	放大镜宽度(width of magnifying glass)
selectorStyle	Object	{}	放大镜样式(style of magnifying glass)
type	String	square	放大镜类型(circle,square)(magnifying glass type (circle,square))
hide-zoom	Boolean	false	隐藏放大镜，图像加载时不会显示放大镜(hide magnifying)
out-show	Boolean	true	图片展示区域会在图片外部(image will be displayed on the outside)
pointer	Boolean	false	外部区域的中心点 (The center of an external area)
baseline	Boolean	false	外部区域的基线 (The baseline of the external area)
move-event	Object/mouseEvent	null	当需要在外部监听移动事件时,请通过该字段传入事件（必须包含 pageX,pageY,clientY）(When you need to listen for moving events outside the component)
leave-event	Object/mouseEvent	null	当需要在外部监听离开事件时，请通过该字段传入事件(When you need to listen for leaving events outside the component)