image-drag
v1.3.1
Published
一个使用拖拽修改图片尺寸的组件
Downloads
19
Readme
image-drag
Example
import React from 'react';
import ImageDrag from 'image-drag';
class Image extends React.Component {
state = {
isShow: false,
isUse: true,
}
render() {
const { isShow, isUse } = this.state;
const dragProps = {
width: 600, // can only receive number
image: 'https://image.xx.jpg' || 'file',
toolBar: {
isShow,
isUse
}
}
return (<ImageDrag {...dragProps} />);
}
}
export default Image;
API
|name|type|desc|other|version|
|-|-|-|-|-|
|width|number|图片区域宽度|默认600|v 1.0.0|
|height|number|图片区域高度|默认400|v 1.0.0|
|image|file
or url
|图片||v 1.0.0|
|children|dom元素
|图片|, 如果image
也存在,此属性(children
)优先|v 1.0.0|
|imgStyle|object|图片样式属性||v 1.0.0|
|toolBar|object|工具栏配置||v 1.0.0|
|dragPoint|object|拖拽点配置||v 1.0.0|
|tabIndex|string|设置 tabIndex 属性||v 1.2.0|
|onClickImage|function|点击图片|function(toolInfo)|v 1.0.0|
|onDragStart|function|拖拽开始|function(toolInfo, event, [clientX, clientY])|v 1.1.0|
|onDragging|function|拖拽中|function(imageDragStyle)|v 1.1.0|
|onDragEnd|function|拖拽结束|function(toolInfo, event, [clientX, clientY])|v 1.1.0|
|onFocusImage|function|获取图片焦点事件|function(toolInfo)|v 1.2.1|
|onBlurImage|function|失去图片焦点事件|function(toolInfo)|v 1.2.1|
|renderTool|function|自定义工具栏显示形式|function(toolInfo),接收一个Dom元素|v 1.0.0|
renderTool中传入的参数为
toolBar
中的信息, 同时会多传递一个刷新图片尺寸的函数在 v 1.2.x 及以上版本中
function(toolInfo)
传递的toolInfo
为只读属性
toolBar
|name|type|desc|other|version| |-|-|-|-|-| |top|number|位置属性|0|v 1.0.0| |bottom|number|位置属性|0|v 1.0.0| |left|number|位置属性|0|v 1.0.0| |right|number|位置属性|0|v 1.0.0| |width|number|拖拽后图片区域宽度||v 1.0.0| |height|number|拖拽后图片区域高度||v 1.0.0| |className|string|toolBar样式||v 1.0.0| |isUse|boolean|是否使用toolBar|true|v 1.0.0| |isShow|boolean|是否接管显示toolBar,会覆盖掉内置显示属性|false|v 1.0.0| |isBlock|boolean|是否进行块状化布局||v 1.0.0|
dragPoint
|name|type|desc|other|version| |-|-|-|-|-| |topLeftPoint|object|左上角拖拽点样式|{}|v 1.0.0| |topRightPoint|object|右上角拖拽点样式|{}|v 1.0.0| |bottomLeftPoint|object|左下角拖拽点样式|{}|v 1.0.0| |bottomRightPoint|object|右下角拖拽点样式|{}|v 1.0.0| |style|object|拖拽点公共样式|*|v 1.0.0|