ng-picture-viewer

angular image-viewer based on ng-zorro-antd and iv-viewer


Example

Live Example

Usage

$3

``
npm install iv-viewer ng-picture-viewer --save
`
全局添加第三方样式
`
@import "~iv-viewer/dist/iv-viewer.min.css"
`

添加 ImgViewerModule 模块到项目中

`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ImgViewerModule } from 'ng-picture-viewer';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
HttpClientModule,
ImgViewerModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
`
#### Global configuration

ImgViewerModule.forRoot有两个参数制定全局通用配置。

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

#### ImgViewerType

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

$3

`html

`

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| [imgViewerClass] | 外部样式类 | string | - |
| [images] | 图片路径数组 | string[] | [] |
| [showOperate] | 是否显示所有操作功能 | boolean | true |
| [zoom] | 是否显示放大缩小功能 | boolean | true |
| [rotate] | 是否显示旋转功能 | boolean | true |
| [reset] | 是否显示重置功能 | boolean | true |
| [fullscreen] | 是否显示全屏功能 | boolean | true |
| [download] | 是否显示下载功能 | boolean | true |
| [defaultName] | 图片下载文件前缀 | string | download |
| (prevChange) | 切换上一张回调函数 | EventEmitter | - |
| (nextChange) | 切换下一张回调函数 | EventEmitter` | - |

License

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