Splitter 分隔面板 beta

可将区域水平或垂直分隔，并可自由拖动以调整各个区域的大小。

基础用法

最基本的用法，如果未传入默认尺寸，将自动平均分配。

export function SplitterBasic() {  return (    <div style={container}>      <ElSplitter>        <ElSplitterPanel size="30%">          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel min={200}>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

垂直布局

使用垂直方向。

export function SplitterVertical() {  return (    <div style={container}>      <ElSplitter layout="vertical">        <ElSplitterPanel>          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

可折叠

配置 collapsible 可提供快速收缩功能。你可以使用 min 属性来防止折叠后通过拖拽进行扩展。

enable

export function SplitterCollapsible() {  const [isCollapsible, setIsCollapsible] = useState(true);  return (    <div>      <ElSwitch        className={styles.switch}        checked={isCollapsible}        onCheckedChange={setIsCollapsible}        activeText="enable"        inactiveText="disable"        inlinePrompt      />      <div style={container}>        <ElSplitter>          <ElSplitterPanel collapsible={isCollapsible} min="50">            <DemoPanel>1</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel collapsible={isCollapsible}>            <DemoPanel>2</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel>            <DemoPanel>3</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel collapsible={isCollapsible}>            <ElSplitter layout="vertical">              <ElSplitterPanel collapsible={isCollapsible}>                <DemoPanel>4</DemoPanel>              </ElSplitterPanel>              <ElSplitterPanel collapsible={isCollapsible}>                <DemoPanel>5</DemoPanel>              </ElSplitterPanel>            </ElSplitter>          </ElSplitterPanel>        </ElSplitter>      </div>    </div>  );}

禁用拖动

当任一面板禁用 resizable 时，拖拽功能将被禁用。

disable

drag disable

export function SplitterDisableDrag() {  const [resizable, setResizable] = useState(false);  return (    <div>      <ElSwitch        className={styles.switch}        checked={resizable}        onCheckedChange={setResizable}        activeText="enable"        inactiveText="disable"        inlinePrompt      />      <div style={container}>        <ElSplitter>          <ElSplitterPanel>            <DemoPanel>1</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel resizable={resizable}>            <DemoPanel>{`drag ${resizable ? "enable" : "disable"}`}</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel>            <DemoPanel>3</DemoPanel>          </ElSplitterPanel>        </ElSplitter>      </div>    </div>  );}

面板大小

v-model:size 可以获取面板的大小。

100px

export function SplitterSize() {  const [size, setSize] = useState<number>(100);  const handleResizeStart = (index: number, sizes: number[]) => {    console.log("resizeStart", index, sizes);  };  const handleResize = (index: number, sizes: number[]) => {    console.log("resize", index, sizes);  };  const handleResizeEnd = (index: number, sizes: number[]) => {    console.log("resizeEnd", index, sizes);  };  return (    <div style={container}>      <ElSplitter        onResizeStart={handleResizeStart}        onResize={handleResize}        onResizeEnd={handleResizeEnd}      >        <ElSplitterPanel>          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel          size={size}          onSizeChange={setSize}          min={50}          max={200}        >          <DemoPanel>{`${size}px`}</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel>          <DemoPanel>3</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

延迟2.11.0

当启用lazy时，面板大小将不会在拖动时实时更新，只能在拖动结束后更新。

export function SplitterLazy() {  return (    <div style={container}>      <ElSplitter lazy>        <ElSplitterPanel collapsible min="50">          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel collapsible>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel collapsible>          <DemoPanel>3</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

Splitter API

Splitter Attributes

属性名	说明	类型	默认值
layout	布局方向	`enum`	horizontal
lazy	是否开启懒更新	`boolean`	false
class-name	根元素类名	`string`	—

Splitter Events

事件名	说明	参数
onResizeStart	开始拖拽某条分隔条	`Function`
onResize	拖拽过程中持续触发（lazy 模式不触发）	`Function`
onResizeEnd	拖拽结束	`Function`
onCollapse	折叠/展开某面板	`Function`

SplitterPanel API

SplitterPanel Attributes

属性名	说明	类型	默认值
size	面板尺寸（像素或百分比）。配合 onSizeChange 即 `v-model:size`	`string` / `number`	—
min	面板最小尺寸	`string` / `number`	—
max	面板最大尺寸	`string` / `number`	—
resizable	是否可拖拽调整	`boolean`	true
collapsible	是否显示收起按钮	`boolean`	false
start-collapsible	起始侧收起按钮的自定义内容，对应 start-collapsible 插槽	`ReactNode`	—
end-collapsible	结束侧收起按钮的自定义内容，对应 end-collapsible 插槽	`ReactNode`	—

SplitterPanel Events

事件名	说明	参数
onSizeChange	面板尺寸变化	`Function`