https://github.com/future-team/eg-imageview
图片预览
https://github.com/future-team/eg-imageview
Last synced: 11 months ago
JSON representation
图片预览
- Host: GitHub
- URL: https://github.com/future-team/eg-imageview
- Owner: future-team
- License: mit
- Created: 2016-05-17T03:31:30.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-28T06:14:50.000Z (over 8 years ago)
- Last Synced: 2025-05-16T11:48:54.820Z (about 1 year ago)
- Language: JavaScript
- Size: 11.9 MB
- Stars: 5
- Watchers: 8
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eg-imageview
单张或多张图片预览组件，依赖于eagle-ui组件库。
1、支持两种方式的参数传递。一是通过file参数，二是以item的数组方式传入。
2、支持放大、缩小、旋转等功能。
3、可以指定是否循环展示
4、指定是否显示遮罩
## 提示：eagle-ui是3.0.0以下版本请拉取3.0.5版本，以上版本拉取3.0.1。
## UI展示
## 参数介绍
```js
/**
* @param file
* 图片参数数组
* @default []
* */
file: {
name: '',
url: ''
},
id: '',
/**
* @param isMask
* 是显示遮罩层
* @default true
* */
isMask: true,
/**
* @param isLoop
* 是否循环播放
* @default true
* */
isLoop: true,
/**
* @param activeIndex
* 当前展示图片下标
* @default 0
* */
activeIndex:0
/**
* @param showIcon
* 配置要显示的操作图标
* @default Object
* */
showIcon:{
/**
* @param leftRotate
* 是否显示左旋转图标
* @default false
* */
leftRotate:false,
/**
* @param rightRotate
* 是否显示右旋转图标
* @default false
* */
rightRotate:false,
/**
* @param zoomIn
* 是否显示放大图标
* @default false
* */
zoomIn:false,
/**
* @param zoomOut
* 是否显示放大图标
* @default false
* */
zoomOut:false
}
```
ps： file参数需按上述结构。单张图片支持对象，多张必须为数组。
## 使用
* 一、原有通过file参数的方式传入，单个图片支持数组或者对象，多张图片只支持数组。
activeIndex，默认显示的图片下标。
```js
import {ImageView} from '../../src/index.js';
import React, { Component ,PropTypes} from 'react';
import ReactDom from 'react/lib/ReactDOM';
import {Button,Dialog,Toast,Icon} from 'eagle-ui';
let file = {
name:'test',
url:'./src/test.jpg'
},
showIcon={
leftRotate:true,
rightRotate:true,
zoomIn:true,
zoomOut:true
};
function show(){
Dialog.mask('testIamgeView').then(function(){
console.log('success');
Dialog.close();
},function(type){
console.log('cancel');
});
}
ReactDom.render(
点击我显示图片预览
,
document.getElementById('root')
);
```
* 二、以子对象的方式传入
```js
```
## 示例演示
下载此项目到本地安装依赖包后执行 **npm run demo** 即可预览。
## update
* `version 3.0.5` 支持eagle-ui3.0以下的版本。
* `version 3.0.1` 支持eagle-ui3.0以上版本。
* `version 3.0.0` 增加向左向右旋转功能，支持各个选项配置，不再默认全部展示。
* `version 2.0.9` 支持多图片上下翻页和是否展示遮罩层
* `version 2.0.1` 支持图片放大后拖动，修复图片旋转后位置错误bug，修复图片拉伸变形
* `version 2.0.2` 支持多张图片的展示和翻页