基于react的拖拽缩放插件
import Zoomable from 'react-stretchable'; class App extends React.Component { constructor(props) { super(props); } render() { const testOption = { zoomable: { width: { min: 200,//default 10 拉伸最小宽度 max: 500//default 1000 拉伸最大宽度 }, height: { min: 300,//default 10 拉伸最小高度 max: 500//default 500 拉伸最大高度 } }, onZoomStart: (result) => { console.log("onZoomStart", result); }, onZoomEnd: (result) => { console.log("onZoomEnd", result); }, onZooming: (result) => { console.log("onZooming", result); } } return <Zoomable style={{background: "blue"}} {...testOption}> <div>test</div> </Zoomable>; } }; ReactDOM.render( <App />, document.getElementById('Test') ); API
| 参数 | 说明 | 类型 | 默认值 | ||
|---|---|---|---|---|---|
| defaultPositionX | 相对X轴的位移 | number | 0 | ||
| defaultPositionY | 相对Y轴的位移 | number | 0 | ||
| fixedWidth | 固定宽度，用于不拉伸宽度的情况下，一般使用非Number类型的宽度样式 | null | |||
| fixedHeight | 固定高度，用于不拉伸高度的情况下，一般使用非Number类型的高度样式 | null | |||
| draggable | used | 是否使用react-draggable拖拽功能 | boolean | true | |
| options | react-draggable api Invalid props: [position, defaultPosition] | object | null | ||
| handleCursor | 可拖拽区域的光标类型 | string | move | ||
| className | 添加class样式 | string | "" | ||
| style | 添加style属性 | object | {} | ||
| zoomable | used | 是否使用拉伸功能 | boolean | true | |
| direction | 可拉伸方向 | array[string] | ["top", "right-top", "right", "right-bottom", "bottom", "left-bottom", "left", "left-top"] | ||
| width | min | 大于内容宽度时，设置为默认宽度 | number | 10 | |
| max | 小于内容宽度时，设置为默认宽度 | number | 1000 | ||
| height | min | 大于内容高度时，设置为默认高度 | number | 10 | |
| max | 小于内容高度时，设置为默认高度 | number | 500 | ||
| onZoomStart | 拉伸开始时调用 | function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) | - | ||
| onZooming | 拉伸进行中调用 | function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) | - | ||
| onZoomEnd | 拉伸结束时调用 | function(param=object{direction:方向,position:位置{x,y},width:宽度,height:高度}) | - | ||
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
