vue图片预览组件v-viewer（适用于vue2和vue3）-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1237 天，文章内容可能已经过时。

预览图：

vue图片预览组件v-viewer

文档地址：

Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

预览地址

demo

下载

vue2：

npm install v-viewer

vue3：

npm install v-viewer@next

使用

引入v-viewer及必需的css样式，并使用Vue.use()注册插件，之后即可使用。

<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

也可以使用api的方式：

<template>
  <div>
    <div class="images">
      <img v-for="src in images" :src="src" :key="src" @click="show(src)">
    </div>
  </div>
</template>
<script>
	import 'viewerjs/dist/viewer.css'
	import { api as viewerApi } from 'v-viewer'
	export default {
		directives: {
			viewer: viewer({
				debug: true,
			}),
		},
		data() {
			return {
				images: [
					"https://picsum.photos/200/200",
					"https://picsum.photos/300/200",
					"https://picsum.photos/250/200"
				]
			};
		},
		methods: {
			show (src) {
				viewerApi({
        	images: [src]
      	})
			}
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vue3中的使用方式和vue2中相似

配置项

'inline': true, // 是否启用inline模式

'button': true, // 是否显示右上角关闭按钮

'navbar': true, // 是否显示缩略图底部导航栏

'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸

'toolbar': true, // 是否显示工具栏

'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true

'fullscreen': true, // 播放时是否全屏，默认true

'loading': true, // 加载图片时是否显示loading图标，默认true

'loop': true, // 是否可以循环查看图片，默认true

'movable': true, // 是否可以拖得图片，默认true

'zoomable': true, // 是否可以缩放图片，默认true

'rotatable': true, // 是否可以旋转图片，默认true

'scalable': true, // 是否可以翻转图片，默认true

'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true

'transition': true, // 使用 CSS3 过度，默认true

'keyboard': true, // 是否支持键盘，默认true

'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1

'minZoomRatio': 0.01, // 最小缩放比例，默认0.01

'maxZoomRatio': 100, // 最大缩放比例，默认100

'url': 'data-source' // 设置大图片的 url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39