# 竖直高度调整器组件vertical-resizer

组件来源: 办公系统v3 - common组件

## 1.功能说明

可添加至页面中，然后通过拖拽改变组件两侧的高度

## 2.组件依赖

-- react

## 3.组件接口

```tsx
interface Iprops {
    children?: ReactNode                         //子节点
    defaultHeight?: number                       //默认高度
    onHeightChange?: (value: number) => void     //拖动高度改变的回调函数
    onHeightChangeDown?: (value: number) => void //拖动高度改变完成时，鼠标松开后的回调函数
    color?: string                               //垂直高度调整器的颜色
}
```

## 4.案例

在time-axis-charts绘制统计图案例的基础上加上vertical-resizer组件

1)导入组件

```tsx
import MultiLineChart from './common/time-axis-charts/multi-line-chart';
import MultiEChart from './common/time-axis-charts/mutil-echart';
import VerticalResizer from './common/resizer/vertical-resizer';
function Test() {
    const [statisticHeight, setStatisticHeight] = useState<number>(400);  //初始化统计图高度
    const data = [
        {value:5.7, time:1665626825256, name:"小明"},
        {value:10.4, time:1665713225256, name:"小明"},
        {value:17.1, time:1665799625256, name:"小明"},
        {value:18.6, time:1665886025256, name:"小明"},
        {value:23.5, time:1665972425256, name:"小明"},
        {value:41.8, time:1666058825256, name:"小明"},
        {value:47.4, time:1666145225256, name:"小明"},

        {value:0.6, time:1665626825256, name:"小红"},
        {value:1.3, time:1665713225256, name:"小红"},
        {value:17.1, time:1665799625256, name:"小红"},
        {value:18.9, time:1665886025256, name:"小红"},
        {value:34.7, time:1665972425256, name:"小红"},
        {value:35.5, time:1666058825256, name:"小红"},
        {value:53.2, time:1666145225256, name:"小红"},
    ]
    return (
        <div className="test-main-container">
            <MultiLineChart
                q_data={data}
                precision={0}
                height={700-statisticHeight}
            />

            <VerticalResizer 
                defaultHeight={statisticHeight}    
                onHeightChange={(value) => setStatisticHeight(value)}
                color={"#ff0000"}
                >
                <MultiEChart q_data={data} precision={1}/> {/* 修改处 */}   
            </VerticalResizer>
        </div>
        )
    }
```

## 5.备注

### 备注1

本案例改变的是vertical-resizer上方组件的高度，可以把“修改处”改为

```tsx
<MultiEChart q_data={data} precision={1} height={statisticHeight}/>
```

即可修改上下两处的高度

### 备注2

修改高度时也可以不指定VerticalResizer上方组件的高度，而将其样式设置为display:flex从而达到自适应的效果。详情可参考项目project-web中的src/routes/task-page/index中VerticalResizer的用法。

### 备注3

后面新增的水平高度调整器组件HorizontalResizer接口用法与VerticalResizer完全一致，只是调整的方向不同