Vue使用v-viewer实现图片预览
时间：2021-04-03 07:48:03 | 栏目：vue | 点击：次
本文实例为大家分享了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="image"/> </viewer> </van-swipe-item> </van-swipe>
效果
