VUE图片点击预览组件

发表于 | 分类于
VUE图片点击预览组件

图片预览组件一

安装vue-directive-image-previewer

1
npm install vue-directive-image-previewer --save

main.js中引入

1
2
3
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

组件中引用

1
2
3
4
5
<template>
  <div>
      <img v-image-preview src="picture-url"/>
  </div>
</template>

组件的优缺点

该组件对原有样式侵入性小，使用简单，缺点是点击放大的图片不能再缩放

图片预览组件二

github地址：https://github.com/mirari/v-viewer

官方中文文档：文档网址

安装

1
npm install v-viewer --save

在main.js中引入

1
2
3
4
5
6
7
8
9
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<viewer :images="images">
	   <img v-for="src in images" :src="src" :key="src" width="300">
	</viewer>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                images : []
            }
        }
    }
</script>

images 数组里的格式很简单，就是图片地址，没有多余的参数。

组件的优缺点

该组件会对原来的图片外层添加一层的DIV，也就是viewer标签生成的，所以要微调样式，支持图片的缩放、旋转等，功能更加强大。