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>