ng-picture-viewer

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

Example

Live Example

Usage

1. Install

npm install iv-viewer ng-picture-viewer --save

全局添加第三方样式

@import "~iv-viewer/dist/iv-viewer.min.css"

添加 ImgViewerModule 模块到项目中

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 | 下载 |

2. Template

<nz-picture-viewer [images]="images"></nz-picture-viewer>

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | [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<number> | - | | (nextChange) | 切换下一张回调函数 | EventEmitter<number> | - |

License

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