Vue-pictures-viewer NPM

vue-pictures-viewer

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

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)

image-viewer image vue pictures-viewer viewer element-ui

element-ui iv-viewer

@infinitebrahmanuniverse/nolb-vue-pi @everything-registry/sub-chunk-3088

2 years ago

4 years ago

4 years ago

4 years ago

4 years ago