vue图片点击放大预览v-viewer

古城微笑少年丶 2022-12-10 10:23 239阅读 0赞

## 1.下载v-viewer ##

npm install v-viewer -S

## 2.main.js中引入注册 ##

import Vue from 'vue';
    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)
    Viewer.setDefaults({
      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' }
    })

### 3.页面调用  ###

<viewer :images="images">
          <img
            v-for="(src,index) in images"
            :src="src"
            :key="index"
            class="images"
          >
        </viewer>

其中images必须为一个数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221123/83483c8998214a1f8c21e04957fdee3e.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue实现点击上传图片预览图片功能

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL...

曾经终败给现在/ 2024年04月18日 21:39/ 0 赞/ 182 阅读

相关【VUE】图片预览放大缩小插件

在看项目时，突然看到预览图片的弹窗，感觉好僵硬，不能放大，不能切换，于是便在网上找下关于图片预览的插件，有找到三个插件，具体的优劣势的看自己的使用吧，我目前只是在电脑查看效果，

古城微笑少年丶/ 2023年05月29日 11:58/ 0 赞/ 12 阅读

相关 vue v-html新增点击图片放大预览功能组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

蔚落/ 2023年01月13日 01:44/ 0 赞/ 336 阅读

相关 vue图片点击放大预览v-viewer

1.下载v-viewer npm install v-viewer -S 2.main.js中引入注册 import Vue from 'vue'

古城微笑少年丶/ 2022年12月10日 10:23/ 0 赞/ 240 阅读

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

朴灿烈づ我的快乐病毒、/ 2022年12月02日 00:43/ 0 赞/ 810 阅读

相关 vue图片点击放大预览v-viewer

图片放大预览功能 ![在这里插入图片描述][20210317164841650.png_pic_center] 1、安装依赖 npm install v-

亦凉/ 2022年10月22日 13:56/ 0 赞/ 628 阅读

相关点击按钮预览图片，可以预览多组图片（vue+element）

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ > 1、点击按钮预览图片； > 2、可以预览多个

た入场券/ 2022年08月30日 15:59/ 0 赞/ 1043 阅读

相关微信图片点击预览

$(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi

快来打我*/ 2022年06月08日 09:50/ 0 赞/ 892 阅读

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

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

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

相关 uni-app点击预览图片

<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi

忘是亡心i/ 2021年07月24日 21:31/ 1 赞/ 1485 阅读