vue 图片缩放组件_用于vue的图像查看器组件，支持旋转，缩放，缩放等

vue 图片缩放组件

观看者 (v-viewer)

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

用于Vue的图像查看器组件，基于viewer.js支持旋转，缩放，缩放等

View demo 查看演示 Download Source 下载源

安装 (Installation)

Install from GitHub via NPM

通过NPM从GitHub安装

npm install v-viewer

用法 (Usage)

To use v-viewer, simply import it, and call Vue.use() to install.

要使用v-viewer ，只需将其导入，然后调用Vue.use()进行安装。

<template>
  <div id="app">
    <!-- directive -->
    <div class="images" v-viewer>
      <img src="1.jpg">
      <img src="2.jpg">
      ...
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    }
  }
</script>

指令的用法 (Usage of directive)

Just add the directive v-viewer to any element, then all img elements in it will be handled by viewer.

只需将指令v-viewer添加到任何元素，然后其中的所有img元素都将由viewer处理。

You can set the options like this: v-viewer="{inline: true}"

您可以这样设置选项： v-viewer="{inline: true}"

Get the element by selector and then use el.$viewer to get the viewer instance if you need.

通过选择器获取元素，然后根据需要使用el.$viewer获取viewer实例。

<template>
  <div id="app">
    <div class="images" v-viewer="{movable: false}">
      <img v-for="src in images" :src="src" :key="src">
    </div>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    },
    methods: {
      show () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      }
    }
  }
</script>

作者 (Author)

mirari

翻译自: https://vuejsexamples.com/image-viewer-component-for-vue-supports-rotation-scale-zoom-and-so-on/

vue 图片缩放组件