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

谁借莪１个温暖的怀抱￠ 2024-04-08 11:12 10阅读 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 条评论，10人围观）

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

相关阅读

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

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

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

相关 vue实现文件预览

1、可以预览图片、文档、视频等，视频需要安装视频预览插件：cnpm install --save video.js 2、代码：

比眉伴天荒/ 2023年01月13日 06:27/ 0 赞/ 664 阅读

相关 vue项目elementUI预览图片

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

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

相关图片预览

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

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

相关 vue 手机预览图片功能

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

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

相关 vue 图片预览组件

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

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

相关 Vue图片上传预览

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

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

相关图片预览

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

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

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2140 阅读

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

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

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