在 vue 中使用 v-viewer 预览图方法

# 图片放大预览功能

参考网站：https://github.com/mirari/v-viewer

# 1.安装依赖

npm install v-viewer --save

# 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

# 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

在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

# 4.官方文档

NPM：https://www.npmjs.com/package/v-viewer
github：https://github.com/mirari/v-viewer

#Vue

上次更新: 2024/01/30, 00:35:17

← 在 vue 中使用 jsPlumb 总结在 Vue 中读取本地文本文件（兼容各种浏览器）→