Vue 中使用图片查看器 v-viewer

https://blog.csdn.net/liang_wf/article/details/102562249

npm install v-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>
复制代码

 

posted @   ThisCall  阅读(614)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示