vue3--移动端实现图片的预览

法1.使用elementUI自带的image组件

法2：使用v-viewer

1.下载安装

npm install v-viewer

2.页面上使用

<template>
  <div>
    <img src="img.png" alt="" style="width: 100%;height:6rem;" id="viewerjs" @click="chickImg()">
  </div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  data() {
    return {}
  },
  methods: {
    chickImg() {
     const viewer1 = 'viewerjs'
      const aaaa = document.getElementById(viewer1)
      new Viewer(aaaa, {
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    }
  }
}
</script>

3.遍历数组得到的图片想要实现预览

    <template>
  <div v-for="(item,index) in data" :key="index">
    <img :src="item.ing" alt="" style="width: 100%;height:6rem;" id="'viewerjs' + index" @click="chickImg(idnex)">
  </div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  data() {
    return {}
  },
  methods: {
    chickImg(idnex) {
     const viewer1 = 'viewerjs' + index
      const aaaa = document.getElementById(viewer1)
      new Viewer(aaaa, {
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    }
  }
}
</script>

也可以在中全局使用，我写的只在页面中引入了
把这个放到main.js即可

  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)