eg-imageview
v4.0.1
Published
图片预览
Downloads
24
Readme
eg-imageview
单张或多张图片预览组件,依赖于eagle-ui组件库。
1、支持两种方式的参数传递。一是通过file参数,二是以item的数组方式传入。
2、支持放大、缩小、旋转等功能。
3、可以指定是否循环展示
4、指定是否显示遮罩
提示:eagle-ui是3.0.0以下版本请拉取3.0.5版本,以上版本拉取3.0.1。
UI展示
参数介绍
/**
* @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,默认显示的图片下标。
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(
<div>
<Button onClick={show}>点击我显示图片预览</Button>
<ImageView id="testIamgeView" file={file} activeIndex={0} showIcon={showIcon}/>
</div>,
document.getElementById('root')
);
- 二、以子对象的方式传入
<ImageView id="testIamgeView1" activeIndex={0}>
<item url='./src/3.jpg' name='demo1'></item>
<item url='./src/2.jpg' name='demo2'></item>
<item url='./src/1.jpg' name='demo3'></item>
</ImageView>
示例演示
下载此项目到本地安装依赖包后执行 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
支持多张图片的展示和翻页