[vue] v-viewer图片预览插件的使用

npm install v-viewer --save

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

    data() {
      images: ['1.jpg', '2.jpg']
    },
    
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        //调用$viewer的show方法，默认显示第一张图片
        this.$viewer.show()
        // 或者
        // this.$refs.viewer.$viewer.show()
        
        //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
        //this.$viewer.view(index)
      }
    }
  }

v-viewer图片预览插件的使用

vue图片查看插件v-viewer使用