1.0.9 • Published 1 year ago
drag-zoom-container v1.0.9
描述
drag-zoom-container 是一个 React 容器组件，放在里面的组件可以拖拽，滚动缩放。
在线效果：https://rhyszhao.github.io/drag-zoom-container/
安装
npm install drag-zoom-container --save使用
- 引入
import DragZoomContainer from 'drag-zoom-container';- 使用
<DragZoomContainer>
<div style={{ width: 100, height: 150, background: 'red' }} />
</DragZoomContainer>其中，DragZoomContainer内的 div 即为要拖拽、缩放的内容。
属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| zoomOnInner | 鼠标是否放在缩放组件上才可滚动缩放 | boolean | false |
| zoomRange | 缩放倍数范围 | object | { min: 0.5, max: 5 } |
| zoomOrigin | 缩放源，具体参考 css 属性 transform-origin | string | "50% 50%" |
| dragInDocument | 拖拽是否限制在整个文档。false 限制拖拽在父容器内 | boolean | true |
| outerStyle | 容器组件的样式，默认宽、高等于父元素 | object | {} |
| position | 拖拽组件在容器中的位置。默认左上角 | object | { top: 0, left: 0 } |