vue-pictures-viewer

vue-pictures-viewer based on element-ui and iv-viewer

Example

Live Example

Usage

1. Install

npm install vue-pictures-viewer element-ui --save

import PicturesViewer from 'vue-pictures-viewer';

export default {
  name: 'App',
  components: {
    PicturesViewer
  },
  data() {
    return {
      title: 'vue-pictures-viewer',
      images: [
        require('./assets/c1.jpg'),
        require('./assets/c2.jpg'),
        require('./assets/c3.jpg'),
        require('./assets/p1.jpg'),
        require('./assets/p2.jpg'),
        require('./assets/p3.jpg')
      ]
    };
  }
};

2. Template

<pictures-viewer :images="images" :options="options"></pictures-viewer>

参数	说明	类型	默认值
[picturesViewer]	外部样式类	string	-
[images]	图片路径数组	string[]	[]
[options]	自定义配置	options	默认值
[showOperate]	是否显示所有操作功能	boolean	true
[zoom]	是否显示放大缩小功能	boolean	true
[rotate]	是否显示旋转功能	boolean	true
[reset]	是否显示重置功能	boolean	true
[fullscreen]	是否显示全屏功能	boolean	true
[download]	是否显示下载功能	boolean	true
[defaultName]	图片下载文件前缀	string	download

options

参数	说明	类型	默认值
ivViewerOptions	iv-viewer全局配置，见Options	IvViewerType	-
imageViewOptions	功能提示全局配置，见imageViewOptions	imageViewOptions	-

imageViewOptions

参数	说明	类型	默认值
zoomInToolTip	放大功能提示	string	放大
zoomOutToolTip	缩小功能提示	string	缩小
rotateLeftToolTip	逆时针功能旋转提示	string	逆时针旋转
rotateRightToolTip	顺时针功能提示	string	顺时针旋转
resetToolTip	重置功能提示	string	重置
fullScreenToolTip	全屏功能提示	string	全屏
downloadToolTip	下载功能提示	string	下载

Events

事件名称	说明	回调参数
prevChange	切换上一张回调函数	(e: number)
nextChange	切换下一张回调函数	(e: number)

License

The MIT License (see the LICENSE file for the full text)