图片预览 m2-img-preview

支持在pc端与移动端的图片全屏查看功能； 拥有缩放、旋转、反转、删除、幻灯片功能； 并可扩展自定义按钮及事件；

安装与部署

版本对应支持

| 发布版本 | 说明 | 终端 | | --- | --- | --- | | 0.0.1 | angular 8-10 | pc、移动端 | | 其他 | angular 6、7 | pc、移动端 |

0.0.1

1. 通过npm 安装插件包

  npm i @jzhsoft/img-preview

2. 将插件模块引入业务module

import {ImgPreviewModule} from "@jzhsoft/img-preview";
@NgModule({
  imports: [
    ImgPreviewModule
  ],
})

其他（手动部署）

1. 拷贝插件代码

找到指定文件夹并拷贝所有文件，源文件夹：

  本工程/projects/jzhsoft/img-preview/src/lib/*.*

目标文件夹：各自项目/src/app/df-ext/modules/img-preview;

2. 将插件模块引入业务module

注意次相对路径要根据业务模块的所在位置进行修改；

import {ImgPreviewModule} from "../../../df-ext/modules/img-preview";
@NgModule({
  imports: [
    ImgPreviewModule
  ],
})

API

[config]

| 参数 | 说明 | 类型(默认值) | | --- | --- | --- | | imgList | 设置 要预览的图片列表 | array | |  --src | 设置 img src属性 | string | |  --title | 设置 预览时展示的图片名 | string | | options | 设置 Viewer.js的options项 详情见更多配置：https://github.com/fengyuanchen/viewerjs#options | object | | |  --toolbar | 设置 工具栏展示的按钮 | any | |   --delete | 设置 删除按钮是否显示；属性设置 boolean 开启本地删除功能；属性设置 function (必须返回Promise)开始远程删除模式 | boolean | function |

版本说明

发布计划

发布时间 暂无

Features

• 优化删除、下载图标大小

发布历史

0.0.1

2020-07-17

Features

• 图片预览主功能；
• 删除图片 支持本地删除与远程http请求删除；

FAQ

删除图片后如何获取 图片列表的数据？

进行图片删除操作后，控件会更新[config]配置的imgList属性；按照通用范例的写法 this.imgPreviewConfig.imgList 为操作删除后的图片列表；