在 vue 中使用 v-viewer 预览图方法
# 图片放大预览功能
- 参考网站:https://github.com/mirari/v-viewer
# 1.安装依赖
npm install v-viewer --save
1
# 2.全局引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: {
inline: true,
button: false,
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'
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 3.在vue页面中使用
<viewer :images="workSwiperList" @inited="inited" ref="viewer" :index="3">
<img v-for="(src,index) in workSwiperList" :src="src" :key="index" >
</viewer>
1
2
3
2
3
在data中使用 inited是初始化完成后执行,我这里是一初始化,就弹出预览图,不用再次点击轮播图
methods: {
inited (viewer) {
this.$viewer = viewer
this.$viewer.index = this.activeIndex
// 不要他的按钮
this.$viewer.options.button = false
// 不要他的底部缩略图
this.$viewer.options.navbar = false
// 不要他的底部标题
this.$viewer.options.title = false
// 不要他的底部工具栏
this.$viewer.options.toolbar = false
this.show()
},
// 调用显示
show () {
this.$viewer.show()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 4.官方文档
- NPM:https://www.npmjs.com/package/v-viewer
- github:https://github.com/mirari/v-viewer
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13