Resizable 伸缩框 ​

根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩

代码演示 ​

如何引入 ​

Resizable 从 2.69.0 开始支持

jsx
import { Resizable } from '@kousum/semi-ui-vue';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@kousum/semi-ui-vue';

单个组件 基本使用 ​

通过defaultSize设置初始大小，可以通过onResizeStart onResize onResizeEnd设置拖拽的回调

tsx
interface Size {
    width: string | number;
    height: string | number;
}

控制伸缩方向 ​

通过设置enable的值开启/关闭特定伸缩方向，默认值均为true

tsx
interface Enable {
    left: Boolean;
    right: Boolean;
    top: Boolean;
    bottom: Boolean;
    topLeft: Boolean;
    topRight: Boolean;
    bottomLeft: Boolean;
    bottomRight: Boolean;
}

设置变化比例 ​

通过ratio设置拖动和实际变化的比例

锁定横纵比 ​

通过lockAspectRatio设置锁定横纵比,可以为boolean或number,为number时表示横纵比为number,为true时锁定初始横纵比

设置最大，最小宽高 ​

可通过 maxHeight，maxWidth，minHeight，minWidth 设置最大，最小宽高

受控宽高 ​

可通过 size 控制元素的宽高

设置缩放值 ​

通过设置 scale，整体缩放元素

根据元素限制元素宽高 ​

通过 boundElement 设置用于限制宽高的元素，支持 string（'parent'｜'window'）

自定义边角 handler 样式 ​

可通过 handleNode 设置不同方向的拖动元素节点，可通过 handleStyle，handleClassName 设置不同方向上的样式

tsx
type HandleNode = {
    left: ReactNode,
    right: ReactNode,
    top: ReactNode,
    bottom: ReactNode,
    topLeft: ReactNode,
    topRight: ReactNode,
    bottomLeft: ReactNode,
    bottomRight: ReactNode,
};

type HandleStyle = {
    left: React.CSSProperties,
    right: React.CSSProperties,
    top: React.CSSProperties,
    bottom: React.CSSProperties,
    topLeft: React.CSSProperties,
    topRight: React.CSSProperties,
    bottomLeft: React.CSSProperties,
    bottomRight: React.CSSProperties,
};

type HandleClass = {
    left: string,
    right: string,
    top: string,
    bottom: string,
    topLeft: string,
    topRight: string,
    bottomLeft: string,
    bottomRight: string,
};

允许阶段性调整宽高 ​

可通过 grid ，snap 属性允许逐渐调整宽高。 grid 属性用于指定调整大小应对齐的增量。默认为 [1, 1]。 snap 属性用于指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴。默认为空。以上两个参数可结合 snapGap 使用，该参数用于指定移动到下一个目标所需的最小间隙。默认为 0，这意味着始终使用 grid/snap 设定的目标。

tsx
interface Snap {
    x: number[];
    y: number[];
}

组合组件 基本使用 ​

注意事项
`ResizeGroup`的父元素需要具有主轴方向上的尺寸 最好不要为`ResizeItem`设置`padding`，会导致最小尺寸不符合预期，可以为子元素设置`padding`

通过direction设置伸缩方向，可选值为horizontal和vertical 支持onResizeStart onResize onResizeEnd回调，支持min max设置最大最小宽高

嵌套使用 ​

通过direction设置伸缩方向，可选值为horizontal和vertical

动态方向 ​

API 参考 ​

Resizable ​

单个伸缩框组件。

参数说明类型默认值版本
className类名string
size控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式Size
defaultSize用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式Size
minWidth指定伸缩框最小宽度string | number
maxWidth指定伸缩框最大宽度string | number
minHeight指定伸缩框最小高度string | number
maxHeight指定伸缩框最大高度string | number
lockAspectRatio设置伸缩框横纵比，当为true时按照初始宽高锁定boolean | number
enable指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动Enable
scale可伸缩元素被缩放的比例number1
boundElement用于限制可伸缩元素宽高的元素,传入 parent 设置父节点为限制节点string
handleNode用于设置拖拽处理元素各个方向的自定义节点HandleNode
handleStyle用于设置拖拽处理元素各个方向的样式HandleStyles
handleClass用于设置拖拽处理元素各个方向的类名称HandleClasses
style样式CSSProperties
snapGap用于指定移动到下一个目标所需的最小间隙。number0
snap指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴Snapnull
grid指定调整大小应对齐的增量[number, number][1,1]
onChange拖拽过程中的回调(size: Size; e: Event; direction: String) => void-
onResizeStart开始伸缩的回调(e: Event; direction: String) => void-
onResizeEnd结束伸缩的回调(size: Size; e: Event; direction: String) => void-

ResizeGroup ​

参数说明类型默认值版本
className类名string
direction指定Group内的伸缩方向'horizontal' | 'vertical''horizontal'

ResizeHandler ​

参数说明类型默认值版本
className类名string
style样式CSSProperties

ResizeItem ​

参数说明类型默认值版本
className类名string
defaultSize用于设置初始宽高，字符串支持%和px单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间string | number
min指定伸缩框最小尺寸（百分比或像素值）string
max指定伸缩框最大尺寸（百分比或像素值）string
style样式CSSProperties
onChange拖拽过程中的回调(size: Size; e: Event; direction: String) => void-
onResizeStart开始伸缩的回调(e: Event; direction: String) => void-
onResizeEnd结束伸缩的回调(size: Size; e: Event; direction: String) => void-

设计变量 ​