Splitter 分隔面板

自由切分区域，支持拖拽调整与折叠

何时使用

需要将页面区域自由切分为多个可拖拽调整的面板时。
需要水平或垂直布局、面板折叠等功能时。
构建 IDE、代码编辑器等可伸缩分栏布局时。

导入

import { Splitter, SplitterPanel } from "@reglow/reui";

基础用法

左侧面板

右侧面板

初始化面板大小，限制面板大小范围。

<Splitter class="h-400px">
  <SplitterPanel :default-size="300" :min="200" :max="500">
    <div class="p-4">左侧内容</div>
  </SplitterPanel>
  <SplitterPanel>
    <div class="p-4">右侧内容</div>
  </SplitterPanel>
</Splitter>

受控模式

受控调整尺寸。当 Panel 之间任意一方禁用 resizable，则其拖拽将被禁用。

<script setup>
import { ref } from "vue";
import { Splitter, SplitterPanel } from "@reglow/reui";

const sizes = ref<(number | string)[]>(["30%", "70%"]);
</script>

<template>
  <Splitter class="h-400px" @resize="(s) => (sizes = s)">
    <SplitterPanel :size="sizes[0]">
      <div class="p-4">First</div>
    </SplitterPanel>
    <SplitterPanel :size="sizes[1]">
      <div class="p-4">Second</div>
    </SplitterPanel>
  </Splitter>
</template>

垂直方向

<Splitter orientation="vertical" class="h-400px">
  <SplitterPanel :default-size="200">
    <div class="p-4">上部</div>
  </SplitterPanel>
  <SplitterPanel>
    <div class="p-4">下部</div>
  </SplitterPanel>
</Splitter>

可折叠

配置 collapsible 提供快捷收缩能力。可以通过 min 限制收缩后不能通过拖拽展开。

<Splitter class="h-400px">
  <SplitterPanel :default-size="'40%'" collapsible :min="'20%'">
    <div class="p-4">First</div>
  </SplitterPanel>
  <SplitterPanel collapsible>
    <div class="p-4">Second</div>
  </SplitterPanel>
  <SplitterPanel collapsible>
    <div class="p-4">Third</div>
  </SplitterPanel>
</Splitter>

可折叠图标显示

配置 collapsible.showCollapsibleIcon 控制折叠图标显示：true 常显 / false 隐藏 / 'auto'（默认）悬浮拖拽条时显示。

<Splitter class="h-400px">
  <SplitterPanel :default-size="'40%'" :collapsible="{ end: true, showCollapsibleIcon: true }">
    <div class="p-4">Panel 1</div>
  </SplitterPanel>
  <SplitterPanel :collapsible="{ start: true, showCollapsibleIcon: true }">
    <div class="p-4">Panel 2</div>
  </SplitterPanel>
</Splitter>

多面板与复杂组合

<Splitter class="h-400px">
  <SplitterPanel :default-size="'20%'" collapsible>
    <div class="p-4">Left</div>
  </SplitterPanel>
  <SplitterPanel>
    <Splitter orientation="vertical" class="h-full">
      <SplitterPanel>
        <div class="p-4">Top</div>
      </SplitterPanel>
      <SplitterPanel>
        <div class="p-4">Bottom</div>
      </SplitterPanel>
    </Splitter>
  </SplitterPanel>
</Splitter>

双击重置

双击拖拽条，相邻面板重置为默认大小（defaultSize）。

<Splitter class="h-400px">
  <SplitterPanel :default-size="'30%'">
    <div class="p-4">Panel 1</div>
  </SplitterPanel>
  <SplitterPanel :default-size="'70%'">
    <div class="p-4">Panel 2</div>
  </SplitterPanel>
</Splitter>

自定义样式

draggerIcon 自定义拖拽图标（字符串 / VNode / 组件，传 null 隐藏），collapsible.icon 自定义折叠图标。

<Splitter class="h-400px" :dragger-icon="draggerIcon" :collapsible="{ icon: { start: '⇤', end: '⇥' } }">
  <SplitterPanel :default-size="'40%'" :min="'20%'" :max="'70%'" collapsible>
    <div class="p-4">Panel 1</div>
  </SplitterPanel>
  <SplitterPanel collapsible>
    <div class="p-4">Panel 2</div>
  </SplitterPanel>
</Splitter>

语义化结构样式与类

通过 classNames / styles 自定义 root / panel / dragger（dragger 支持 { default, active }）。

<Splitter
  class="h-400px"
  :class-names="{ root: 'custom-root', dragger: { default: 'custom-dragger', active: 'custom-dragger-active' } }"
  :styles="{ panel: { background: '#fafafa' } }"
>
  <SplitterPanel :default-size="'40%'">
    <div class="p-4">Panel 1</div>
  </SplitterPanel>
  <SplitterPanel>
    <div class="p-4">Panel 2</div>
  </SplitterPanel>
</Splitter>

延迟渲染模式

拖拽时不会立即更新大小，而是等到松手时才更新。

<Splitter lazy class="h-400px">
  <SplitterPanel :default-size="300">
    <div class="p-4">面板 1</div>
  </SplitterPanel>
  <SplitterPanel>
    <div class="p-4">面板 2</div>
  </SplitterPanel>
</Splitter>

折叠时销毁内容

destroyOnHidden 在折叠（size 为 0）时销毁面板内容，可在单个面板上覆盖。

<Splitter destroy-on-hidden class="h-400px">
  <SplitterPanel :default-size="'40%'" collapsible>
    <div class="p-4">折叠后内容被销毁</div>
  </SplitterPanel>
  <SplitterPanel>
    <div class="p-4">Panel 2</div>
  </SplitterPanel>
</Splitter>

API

Splitter Props

属性	类型	默认值	说明
`orientation`	`"horizontal" \| "vertical"`	-	布局方向（与 `vertical` 同时存在时优先）
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	布局方向（建议使用 `orientation`）
`vertical`	`boolean`	`false`	排列方向，快捷设为垂直
`lazy`	`boolean`	`false`	延迟渲染模式，拖拽松手才更新
`draggerIcon`	`string \| VNode \| Component \| null`	默认把手图标	拖拽图标，传 `null` 隐藏
`collapsible`	`{ motion?: boolean; icon?: { start?: VueNode; end?: VueNode } }`	-	`motion` 折叠动画（默认开启），`icon` 自定义折叠图标
`destroyOnHidden`	`boolean`	`false`	折叠时（size 为 0）销毁面板内容，可在单个面板上覆盖
`classNames`	`SplitterSemantic`	-	语义化结构类名：`root` / `panel` / `dragger`（支持 `{ default, active }`）
`styles`	`SplitterSemanticStyles`	-	语义化结构行内样式

Splitter Events

事件	说明	回调参数
resize	面板大小变化	`(sizes: PanelSize[]) => void`
resizeStart	开始拖拽	`(sizes: PanelSize[]) => void`
resizeEnd	拖拽结束	`(sizes: PanelSize[]) => void`
draggerDoubleClick	双击拖拽条	`(index: number) => void`
collapse	折叠/展开	`(collapsed: boolean[], sizes: PanelSize[]) => void`

SplitterPanel Props

属性	类型	默认值	说明
`defaultSize`	`number \| string`	`"1fr"`	初始面板大小
`size`	`number \| string`	-	受控面板大小
`min`	`number \| string`	-	最小阈值
`max`	`number \| string`	-	最大阈值
`resizable`	`boolean`	`true`	是否开启拖拽伸缩
`collapsible`	`boolean \| { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean \| "auto" }`	`false`	是否可折叠，`showCollapsibleIcon` 控制图标显示方式
`destroyOnHidden`	`boolean`	-	折叠时销毁面板内容，覆盖 Splitter 同名属性
`class`	`string`	-	自定义样式类

PanelSize

type PanelSize = number | string; // 数字为 px，字符串支持 "50%" 等

MasonryGrid 瀑布流

响应式瀑布流布局组件，支持图片懒加载、选择、预览、删除、无限滚动等。

Affix 固钉

将页面元素钉在可视范围内

内容锚点

何时使用
导入
基础用法
API