插件名称 | vue-inner-image-zoom |
---|---|
版本号 | v1.1.0 |
发布时间 | 2021年1月3日 |
插件作者 | laurenashpole |
内部的Vue.js缩放组件,允许用户单击/点击以放大图像。
也可以通过在触摸设备上拖动以及在非触摸设备上拖动或悬停平移来移动图像。
该组件在移动设备上支持响应图像和可选的全屏缩放。
# Yarn
$ yarn add vue-inner-image-zoom
# NPM
$ npm i vue-inner-image-zoom
1.导入并注册组件。
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css';
import InnerImageZoom from 'vue-inner-image-zoom';
export default {
components: {
'inner-image-zoom': InnerImageZoom
}
}
2.将inner-image-zoom
组件添加到模板,并定义原始/预览图像的路径,如下所示:
<inner-image-zoom
src="/path/to/image.jpg"
zoomSrc="/path/to/zoom-image.jpg" />
3.可用的组件道具来配置缩放行为。
moveType: { // pan or drag
type: String,
default: 'pan'
},
srcSet: String,
sizes: String,
sources: Array,
alt: String,
fadeDuration: {
type: Number,
default: 150
},
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
type: Number,
default: 640
},
className: String,
afterZoomIn: Function,
afterZoomOut: Function
v1.1.0(05/13/2021)