Skip to content

LZHD/ng-picture-viewer

Repository files navigation

ng-picture-viewer

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

NPM version

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)