一、效果展示
二、实现方法
此效果的实现使用了第三方组件re-resizable，通过此React组件可以很便捷的实现可拖拽改变组件大小的需求。
三、使用方法
- 安装
re-resizable组件。
npm install --save re-resizable
- 简单使用
import React, {Component} from 'react';
import { Resizable } from "re-resizable";
export default class Demo extends Component {
render() {
return (
<Resizable
defaultSize={{width:320, height:200}}
>
可拖拽组件
</Resizable>
);
}
}
- 相关常用属性方法
| 参数 | 说明 | 类型 |
|---|---|---|
| defaultSize | 初始默认宽高 | string / number |
| minWidth | 宽度下限 | string / number |
| minHeight | 高度下限 | string / number |
| maxWidth | 宽度上限 | string / number |
| maxHeight | 高度上限 | string / number |
| enable | 设置可调整方向权限，可调整很多方向具体请参考官网 | |
| lockAspectRatio | 用于锁定纵横比，还有相关属性方法，具体参考官网 | boolean / number |
| bounds | 指定边界大小 | window / parent / HTMLElement |
| … | … | … |
- 当组件调整时常用方法
-
onResizeStart调整组件开始时调用。 -
onResize调整组件进行时调用。 -
onResizeStop调整组件完成时调用。
简单的使用案例：
import React, {Component} from 'react';
import { Resizable } from "re-resizable";
export default class Demo extends Component {
onResizeStart = (e) => {
console.log("onResizeStart执行");
console.log(e);
};
onResize = (e) => {
console.log("onResize执行");
console.log(e);
};
onResizeStop = (e) => {
console.log("onResizeStop执行");
console.log(e);
};
render() {
return (
<Resizable
style={{background: "#8cdbd5"}}
defaultSize={{width:320, height:200}}
onResize={(e) => this.onResize(e)}
onResizeStart={(e) => this.onResizeStart(e)}
onResizeStop={(e) => this.onResizeStop(e)}
>
可拖拽组件
</Resizable>
);
}
}
- 使用小结
通过观察这几个方法在控制台所打印的内容可以发现，在每次调用这些方法时我们都可以获取到关于此次调整事件的一些信息，而通过这些信息我们就可以完成许多相关性的工作，例如通过在onResize执行时获取调整的宽度和高度传递给父组件或者使用状态管理器进行管理，这样就可以实现拖拽A组件的同时B组件也跟着变化的效果。
end