回転、拡大縮小、ズームできるvue用の画像ビューア「v-viewer」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-viewer.min.js"></script>
<div id="app">
  <viewer :images="images">
    <div class="img" v-for="src in images">
      <img :src="src" :key="src">
    </div>
  </viewer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.img {
  padding: 5px;
  display: inline-block;
  width:150px;
}

Vue

const Viewer = window['VueViewer'].default;

Vue.use(Viewer)
new Vue({
  el: '#app',
  data: {
    images: [
      'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png', 
      'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png',
      'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png',
      'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png'
    ]
  }
});