vue 放大图片查看，缩放等v-viewer

第一步下载

npm install v-viewer --save

第二步，在页面中引入（我这里是直接将下载下来的文件从node_modules提取出来了，在assets）

import Viewer from "@/assets/js/viewer.min.js";
import '@/assets/css/viewer.min.css';

第三步就是使用了，关于使用的方法有很多，这里说一下我遇见的问题。这个查看只能用在img标签上，其他标签不显示图片
这里先放一下参考的网址：https://www.cnblogs.com/javalisong/p/13390300.html
这里有参数使用说明也
我的使用

<template>
  <div>
    测试页面
    <img :id ="url" :data-original='url' src="@/assets/404_images/404.png" @click="aaa(url)" >
    <img :id ="url2" :data-original='url2' src="@/assets/404_images/404.png" @click="aaa(url2)" >
  </div>
</template>

<script>
import Viewer from "@/assets/js/viewer.min.js";
import '@/assets/css/viewer.min.css';
export default {
  name: "marquee-up",
  data() {
    return {
      url:'https://static01.imgkr.com/temp/c4bc308d285a4058ac2b5c3ce15a39e5.png',
      url2:'http://192.168.0.16:8000/media/photo/df_%E5%9B%BE%E7%89%87%E6%B5%8B1%E8%AF%95.jpg',
    }
  },
  mounted() {
  },
  methods: {
    aaa(item) {
      var viewer = new Viewer(document.getElementById(item), {
        url: 'data-original',
        navbar:false,
         show: function (){
            viewer.update();
         },
         hide:function(){ //在图片消失的时候销毁viewer
            viewer.destroy()
         }
      });
      viewer.show()
    }
  },
  components:{
  },
  destroyed() {
    
  }
};

</script>

<style lang="scss" scoped>

$TItemHeight:58px;
.itemTableBox{
    width: 1474px;
    height: 330px;
    background: #ff0;
    margin: 20px auto;
    padding-top: 1px;
    overflow: hidden;
    .TItem{
        width: 100%;
        height: $TItemHeight;
        background: rgba(255, 0, 0, 0.2);
        margin-top: 8px;
        .TI_default{
            height: $TItemHeight;
            float: left;
            font-size: 24px;
            font-weight: 400;
            line-height: $TItemHeight;
            text-align: center;
            color: #fff;
        }
        .TI_Dwidth{
            width: 200px;
            @extend .TI_default;
        }
        .TI_info{
            width: 374px;
            @extend .TI_default;
        }
        .TI_UPTime{
            width: 300px;
            @extend .TI_default;
        }
    }
    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-66px);
    }
}
.box{
  width: 100px;
  line-height: 100px;
  font-size: 30px;
  color: #f00;
  background: #ff0;
}
</style>