Ng-picture-viewer NPM

ng-picture-viewer

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

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)

image-viewer image ng-zorro-antd angular ng-picture-viewer nz-image-viewer viewer

tslib

@everything-registry/sub-chunk-2275 @zalastax/nolb-ng-p @infinitebrahmanuniverse/nolb-ng-p

3 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago