Vue使用v-viewer，实现图片预览

谁借莪１个温暖的怀抱￠ 2024-04-08 11:12 81阅读 0赞

### 1.安装依赖 ###

npm install v-viewer --save

### 2.在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"
      }
    })

### 3.在组件中引用 ###

<van-swipe :autoplay="3000">
    		<van-swipe-item v-for="(image, index) in moodsImg" :key="index">
    			<viewer :images = "moodsImg" >
    				<img :src="image"/>
    			</viewer>
    		</van-swipe-item>
    </van-swipe>

### 效果图 ###

![2f7e1c79dcde4a89b9160dedfb7721cd.png][]

[2f7e1c79dcde4a89b9160dedfb7721cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5fbd0716e7924a0cb01bc63155f358ee.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue使用v-viewer，实现图片预览

1.安装依赖 npm install v-viewer --save 2.在main.js中引入 import Viewer from 'v-vi

谁借莪１个温暖的怀抱￠/ 2024年04月08日 11:12/ 0 赞/ 82 阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 73 阅读

相关 vue+elementui实现图片预览，放大图片

背景：后台系统用到图片预览功能。 > 页面<template> <div> <span @click="clickImg(index)

约定不等于承诺〃/ 2023年07月20日 05:36/ 0 赞/ 19 阅读

相关 vue项目elementUI预览图片

vue项目elementUI预览图片说明： 1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能 2，根据产品需求，要不展示图片，点击“图片预览

我不是女神ヾ/ 2022年12月28日 07:16/ 0 赞/ 763 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 510 阅读

相关 vue 手机预览图片功能

![20180420155824912][] 安装 NPM npm install --save vue-picture-preview 使

梦里梦外;/ 2022年05月25日 22:50/ 0 赞/ 486 阅读

相关 vue 图片预览组件

vue-photo-preview 转自 https://npm.taobao.org/package/vue-photo-preview 安

阳光穿透心脏的1/2处/ 2022年05月24日 13:45/ 0 赞/ 484 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 572 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 728 阅读

相关 Vue使用v-viewer 插件实现图片预览

vue图片点击放大预览v-viewer 1、安装依赖 npm install v-viewer --save 2.在main.js中引入 import V

比眉伴天荒/ 2021年07月24日 19:56/ 0 赞/ 856 阅读