在vue项目中使用v-viewer,图片方法，旋转，缩小等操作

忘是亡心i 2021-11-14 13:22 279阅读 0赞

第一步、安装

npm install v-viewer --save

第二步、在项目中引用

//    在main.js中全局引用
    import Viewer from "v-viewer"// 图片预览
    import "viewerjs/dist/viewer.css"// 图片预览
    
    
    
    
    Vue.use(Viewer)
    
    Viewer.setDefaults({
     defaultOptions: {
        zIndex: 9999
      },
      Options: {
        "inline": true,
        "button": true,
        "navbar": true,
        "title": true,
        "toolbar": true,
        "tooltip": true,
        "movable": true,
        "zoomable": true,
        "rotatable": true,
        "scalable": true,
        "transition": true,
        "fullscreen": true,
        "keyboard": true,
        "url": "data-source"
      }
    })

第三步、在组件中使用

<viewer>
                  <template v-for="(item,index) in scope.row.img">
                    <img class="table-image"
                         :key="index"
                         :src="item"
                         title="点击可预览全部图片">
                  </template>
                </viewer>

这样就可以了

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关在vue项目中使用iconfont的方法

1:百度iconfont,找到阿里巴巴矢量图标库官网,https://www.iconfont.cn/然后注册登录,或者用github登录也行,此步骤跳过; 2、搜索需要的i

逃离我推掉我的手/ 2023年07月09日 08:26/ 0 赞/ 190 阅读

相关 jquery图片放大缩小旋转功能实现

下载地址：[https://download.csdn.net/download/qq\_43037478/12076630][https_download.csdn.net_

偏执的太偏执、/ 2023年06月27日 03:50/ 0 赞/ 69 阅读

相关等比例缩小/放大图片

设置读入、输出文件以及缩小/放大比例 imgfile = 'E:/PycharmProjects/PracticalTableau/img/191119-8.png'

淡淡的烟草味﹌/ 2023年02月22日 13:44/ 0 赞/ 65 阅读

相关 ant-design-vue 图片预览组件，支持旋转，放大缩小，下载

![bc1a7800f6566634494c762cb0d14280.png][] // 图片预览组件，支持旋转，放大缩小，下载 // 图片预览组件，支持旋转，放大

拼搏现实的明天。/ 2023年01月20日 09:59/ 0 赞/ 63 阅读

相关 vue 图片旋转放大缩小

data： deg:90, scale:0 methods: rotate(type){ if(type ==

缺乏、安全感/ 2022年12月17日 12:53/ 0 赞/ 321 阅读

相关 Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

安装 npm install v-viewer 引用在main.js文件下全局引用 import Viewer from 'v-viewer'

秒速五厘米/ 2022年11月29日 14:30/ 0 赞/ 342 阅读

相关 CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

博主：最近[iOS][]开发中用到CoreAnimation的framework来做动画效果，虽然以前也用过，但一直没有系统学习过，今天看到一篇非常详细的博文（虽然是日语，但真

布满荆棘的人生/ 2022年09月21日 05:43/ 0 赞/ 232 阅读

相关 CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

博主：最近iOS开发中用到CoreAnimation的framework来做动画效果，虽然以前也用过，但一直没有系统学习过，今天看到一篇非常详细的博文（虽然是日语，但真的写的很

落日映苍穹つ/ 2022年08月21日 03:18/ 0 赞/ 247 阅读

相关 vue点击图片放大预览图片支持旋转等

vue图片点击放大预览v-viewer库使用 > aiprose 个人随笔上线，网址 [aiprose.com][] [点击访问][Link 1] 提到图片放大预览，可

朱雀/ 2022年05月17日 06:10/ 0 赞/ 670 阅读

相关在vue项目中使用v-viewer,图片方法，旋转，缩小等操作

第一步、安装 npm install v-viewer --save 第二步、在项目中引用 // 在main.js中全局引用 impo

忘是亡心i/ 2021年11月14日 13:22/ 0 赞/ 280 阅读