vue圖片點擊放大預覽v-viewer

Vue圖片瀏覽組件v-viewer，支持旋轉、縮放、翻轉等操作
參考網站：https://github.com/mirari/v-viewer

demo： https://mirari.cc/v-viewer/

1、安裝依賴

npm install v-viewer

 

2、使用

<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 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    }
  }
</script>