ue-zoomer组件使用户可以使用鼠标或触摸来缩放图像或其他内容。
# NPM
$ npm install vue-zoomer --save
导入
import Vue from 'vue'
import VueZoomer from 'vue-zoomer'
Vue.use(VueZoomer)
单一用法:
<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
<img
src="./assets/landscape-1.jpg"
style="object-fit: contain; width: 100%; height: 100%;"
>
</v-zoomer>
图库用法:
<v-zoomer-gallery
style="width: 100vw; height: 100vh;"
:list="['a.jpg', 'b.jpg', 'c.jpg']"
v-model="selIndex"
></v-zoomer-gallery>
maxScale: number
– 最大比例限制,默认为5;minScale: number
– 最小比例限制,默认为1;zoomed: out boolean
– 是否放大(比例等于1)。out
表示props是孩子与父母的单向绑定。因此必须有一个.sync
修饰符。pivot: 'cursor' | 'image-center'
– 缩放内容时的枢轴,默认值为 cursor
,可以设置为 image-center
;limitTranslation: boolean
– 是否限制内容进入容器,默认为 true
;doubleClickToZoom: boolean
– 是否通过双击放大/缩小内容,默认为 true
;reset()
– 重置刻度并转换为初始状态。zoomIn(scale=2)
– 放大.zoomOut(scale=0.5)
– 缩小.list: Array<string> required
– 显示图片网址;v-model(value): number required
– 前显示图像的索引;pivot: 'cursor' | 'image-center'
– 缩放图像时的枢轴,默认为 cursor
,可以设置为 image-center
;limitTranslation: boolean
– 是否限制图像进入容器,默认为 true
;doubleClickToZoom: boolean
– 是否通过双击放大/缩小图像,默认为 true
;reset()
– 重置刻度并转换为初始状态.zoomIn(scale=2)
– 放大.zoomOut(scale=0.5)
– 缩小.