Splitter 分隔面板

可将区域水平或垂直分隔，并通过拖拽自由调整各区域的大小。

import { createApp } from 'vue'
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSplitter)
app.use(ElSplitterPanel)

基础用法

最基础的用法，如果未传入默认尺寸则平均分配。

<template>
  <el-splitter style="height: 200px; border: 1px solid var(--el-border-color);">
    <el-splitter-panel>
      <div class="panel-content">Left Panel</div>
    </el-splitter-panel>
    <el-splitter-panel>
      <div class="panel-content">Right Panel</div>
    </el-splitter-panel>
  </el-splitter>
</template>

<script lang="ts" setup>
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel } from '@szhn/dh-design-pc'

</script>

<style scoped>
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

垂直布局

通过 layout="vertical" 切换为垂直方向。

<template>
  <el-splitter layout="vertical" style="height: 240px; border: 1px solid var(--el-border-color);">
    <el-splitter-panel>
      <div class="panel-content">Top Panel</div>
    </el-splitter-panel>
    <el-splitter-panel>
      <div class="panel-content">Bottom Panel</div>
    </el-splitter-panel>
  </el-splitter>
</template>

<script lang="ts" setup>
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel } from '@szhn/dh-design-pc'

</script>

<style scoped>
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-regular);
}
</style>

可折叠

collapsible 属性为面板提供快速收缩按钮，配合 min 可防止折叠后再被拖出。

<template>
  <div class="demo-col">
    <el-switch v-model="enable" active-text="collapsible" />
    <el-splitter style="height: 200px; border: 1px solid var(--el-border-color);">
      <el-splitter-panel :collapsible="enable" :min="80">
        <div class="panel-content">1</div>
      </el-splitter-panel>
      <el-splitter-panel>
        <div class="panel-content">2</div>
      </el-splitter-panel>
      <el-splitter-panel :collapsible="enable" :min="80">
        <div class="panel-content">3</div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel, Switch as ElSwitch } from '@szhn/dh-design-pc'


const enable = ref(true)
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-regular);
}
</style>

禁用拖动

任一面板设置 resizable=false，对应的拖拽条会被禁用。

<template>
  <div class="demo-col">
    <el-switch v-model="disable" active-text="disable" />
    <el-splitter style="height: 200px; border: 1px solid var(--el-border-color);">
      <el-splitter-panel :resizable="!disable">
        <div class="panel-content">1</div>
      </el-splitter-panel>
      <el-splitter-panel :resizable="!disable">
        <div class="panel-content">drag disable</div>
      </el-splitter-panel>
      <el-splitter-panel>
        <div class="panel-content">3</div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel, Switch as ElSwitch } from '@szhn/dh-design-pc'


const disable = ref(false)
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-regular);
}
</style>

面板大小

使用 v-model:size 可以绑定面板大小，支持像素或百分比字符串。

<template>
  <div class="demo-col">
    <div>当前中间面板大小：{{ size }}</div>
    <el-splitter style="height: 200px; border: 1px solid var(--el-border-color);">
      <el-splitter-panel>
        <div class="panel-content">1</div>
      </el-splitter-panel>
      <el-splitter-panel v-model:size="size">
        <div class="panel-content">{{ size }}</div>
      </el-splitter-panel>
      <el-splitter-panel>
        <div class="panel-content">3</div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel } from '@szhn/dh-design-pc'


const size = ref<string | number>('100px')
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-regular);
}
</style>

延迟

启用 lazy 后，拖动过程中面板尺寸不实时变化，松开时才更新。

<template>
  <el-splitter lazy style="height: 200px; border: 1px solid var(--el-border-color);">
    <el-splitter-panel>
      <div class="panel-content">1</div>
    </el-splitter-panel>
    <el-splitter-panel>
      <div class="panel-content">2</div>
    </el-splitter-panel>
    <el-splitter-panel>
      <div class="panel-content">3</div>
    </el-splitter-panel>
  </el-splitter>
</template>

<script lang="ts" setup>
import { Splitter as ElSplitter, SplitterPanel as ElSplitterPanel } from '@szhn/dh-design-pc'

</script>

<style scoped>
.panel-content {
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-regular);
}
</style>

API

Splitter Attributes

属性名	说明	类型	默认值
layout	布局方向	horizontal / vertical	horizontal
lazy	是否使用懒加载	boolean	false

Splitter Events

事件名	说明	回调参数
resize-start	开始调整面板大小	(index)
resize	拖拽调整中	(sizes, index)
resize-end	调整结束	(index)
collapse	折叠面板	(index, type)

SplitterPanel Attributes

属性名	说明	类型	默认值
size / v-model:size	面板大小（像素或百分比）	string / number	—
min	最小尺寸	string / number	—
max	最大尺寸	string / number	—
resizable	是否可调整	boolean	true
collapsible	是否可折叠	boolean	false

完整 API 参考 Element Plus Splitter。