<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src" />
    </div>
    <!-- component -->
    <viewer :images="images" ref="viewer" :key="viewerKey" >
      <img v-for="(item, index) in images" :key="index" :src="src" />
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
    <button type="button" @click="change">更换</button>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
export default {
  data() {
    return {
      images: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ],
      image2: [
        'https://img.zcool.cn/community/01dbfc5e38dcaba80120a89526eb6c.jpg@1280w_1l_2o_100sh.jpg'
       
      
      ]
    }
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images
      })
    },

    
    change(){
      this.images=this.image2
    }
  }
}
</script>