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

本文实例为大家分享了Vue使用v-viewer实现图片预览的具体代码，供大家参考，具体内容如下

1.安装依赖

npm install v-viewer --save

2.在main.js中引入

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.在组件中引用

<van-swipe :autoplay='3000'> <van-swipe-item v-for='(image, index) in moodsImg' :key='index'> <viewer :images = 'moodsImg' > <img :src='https://www.haobala.com/bcjs/image'/> </viewer> </van-swipe-item></van-swipe>

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。