Vue写真閲覧コンポーネントv-viewerの使い方分析【回転、スケーリング、反転などの操作に対応する】

本論文の実例は、Vue画像閲覧コンポーネントv-viewerの使い方を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
v-viewer
画像閲覧用のVueコンポーネントは、回転、拡大縮小、反転などの操作をサポートし、view.jsに基づいています。
0.xから移動
あなたがしたい唯一の変更は、スタイルファイルを手動で導入することです。

import 'viewerjs/dist/viewer.css'

インストール
npmコマンドでインストール

npm install v-viewer

使用
v-viewerおよび必要なcssスタイルを導入して、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 '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>

命令の形で使う
v-viewerコマンドを任意の要素に追加するだけでいいです。この要素の下の全ての要素はviewerによって自動的に処理されます。
このように構成項目に入ることができます。v-viewer=「{inline:true}」
必要があれば、まず選択器でターゲット要素を探して、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 'viewerjs/dist/viewer.css'
 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>

指令修飾器
static
修飾器を追加すると、viewerの作成は要素バインディング命令時に一回だけ行います。
要素内の画像が再び変化しないことを確認したら、不必要な再構成動作を避けることができます。

<div class="images" v-viewer.static="{inline: true}">
 <img v-for="src in images" :src="src" :key="src">
</div>

コンポーネントで使う
フルスクリーンコンポーネントを単独に導入して、部分的に登録してもいいです。
アクティブドメインスロットを使って、あなたの写真の展示方法をカスタマイズします。
initedイベントを傍受してviewerのインスタンスを取得するか、またはthis.refs.xxx.viewerという方法を使用することもできます。

<template>
 <div id="app">
  <viewer :options="options" :images="images"
      @inited="inited"
      class="viewer" ref="viewer"
  >
   <template scope="scope">
    <img v-for="src in scope.images" :src="src" :key="src">
    {{scope.options}}
   </template>
  </viewer>
  <button type="button" @click="show">Show</button>
 </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
 import Viewer from "v-viewer/src/component.vue"
 export default {
  components: {
   Viewer
  },
  data() {
   images: ['1.jpg', '2.jpg']
  },
  methods: {
   inited (viewer) {
    this.$viewer = viewer
   },
   show () {
    this.$viewer.show()
   }
  }
 }
</script>

設定項目&方法
view.jsを参照してください。
プラグインの設定項目
name

Type：String

Default：view

名前の衝突を避ける必要があるなら、このように紹介してもいいです。

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

default Options

Type:Object

Default：undefined

view.jsのグローバルデフォルトの設定項目を変更したいなら、このように紹介してもいいです。

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
 defaultOptions: {
  zIndex: 9999
 }
})

全体のデフォルト設定をいつでもこのように変更できます。

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
Viewer.setDefaults({
 zIndexInline: 2017
})

ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。