本文实例为大家分享了Vue使用v-viewer实现图片预览的具体代码，供大家参考，具体内容如下
1.安装依赖
|
1
|
npm install v-viewer --save
|
2.在main.js中引入
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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.在组件中引用
|
1
2
3
4
5
6
7
|
<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>
|
效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Wang_kaiya/article/details/108474722