适用于Vue.js的触摸式图像缩放器 - vue-zoomer

适用于Vue.js的触摸式图像缩放器 - vue-zoomer
插件名称 vue-zoomer
发布时间 2020年5月18日
插件作者 jarvisniu

ue-zoomer组件使用户可以使用鼠标或触摸来缩放图像或其他内容。

安装和下载:

# NPM
$ npm install vue-zoomer --save

变更日志:

v0.3.7(20年1月4日)

  • 添加道具`zoomingElastic`

2020年12月22日

  • 添加了mouseWheelToZoom支持

使用:

导入

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>

API:

<v-zoomer> Props

  • 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;

<v-zoomer> 方法

  • reset() – 重置刻度并转换为初始状态。
  • zoomIn(scale=2) – 放大.
  • zoomOut(scale=0.5) – 缩小.

<v-zoomer-gallery> Props

  • list: Array<string> required – 显示图片网址;
  • v-model(value): number required – 前显示图像的索引;
  • pivot: 'cursor' | 'image-center' – 缩放图像时的枢轴,默认为 cursor,可以设置为 image-center;
  • limitTranslation: boolean – 是否限制图像进入容器,默认为 true;
  • doubleClickToZoom: boolean – 是否通过双击放大/缩小图像,默认为 true;

<v-zoomer-gallery> 方法

  • reset() – 重置刻度并转换为初始状态.
  • zoomIn(scale=2) – 放大.
  • zoomOut(scale=0.5) – 缩小.