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)