前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js

一.前端实现图片查看器（放大，缩小，旋转）——Viewer.js

【附参考链接：(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客】

1.0 JS和Css文件的引入

<link href="/Scripts/Common/viewer.min.css" rel="stylesheet">
<script src="/Scripts/Common/viewer.min.js"></script>

另：1.1 vue框架

【附参考链接：vue 图片放大和缩小的方式 - 搬砖滴 - 博客园 (cnblogs.com)】

1.1.1 安装命令

npm install v-viewer --save

1.1.2 vue中全局引入

    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'

完整代码：

<template>
    <div>
       <ul id="imgviewer">
      <div class="sq-content" v-for="(item,index) in cllist" :key="index" >
        <Col span="4"   class="colstyle">
        <div class="sqdiv" style="display: inline-block;">
          <div>{
  {item.wjmc}}</div>         
            <li >                                      
              <img   :data-original="Url .GSurl+ '/wjgl.do? method=viewAttachPage&zlid=' + item.zlid "
               @click="lookDetail(item)" :src="Url .GSurl+