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

2021-10-28 15:34:45 阅读：177 来源： 互联网

标签：default vue assets 缩放 viewer height width TI

第一步下载

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>

标签：default,vue,assets,缩放,viewer,height,width,TI
来源： https://www.cnblogs.com/enhengenhengNymph/p/15475850.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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