FxSplitter 分割面板

将区域水平或垂直分割，并可自由拖拽调整每个区域的大小。

基础用法

最基础的用法，若不传入默认尺寸，将自动等分。

<template>
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter>
      <FxSplitterPanel size="30%">
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel :min="200">
        <div class="demo-panel">2</div>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

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

垂直布局

使用垂直方向分割。

<template>
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter layout="vertical">
      <FxSplitterPanel>
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel>
        <div class="demo-panel">2</div>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

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

折叠

配置 collapsible 可提供快速收起的能力。可配合 min 属性避免折叠后通过拖拽展开。

<template>
  <FxSwitch
    v-model="isCollapsible"
    active-text="enable"
    inactive-text="disable"
    inline-prompt
    class="mb-2"
  />
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter>
      <FxSplitterPanel :collapsible="isCollapsible" min="50">
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel :collapsible="isCollapsible">
        <div class="demo-panel">2</div>
      </FxSplitterPanel>
      <FxSplitterPanel>
        <div class="demo-panel">3</div>
      </FxSplitterPanel>
      <FxSplitterPanel :collapsible="isCollapsible">
        <FxSplitter layout="vertical">
          <FxSplitterPanel :collapsible="isCollapsible">
            <div class="demo-panel">4</div>
          </FxSplitterPanel>
          <FxSplitterPanel :collapsible="isCollapsible">
            <div class="demo-panel">5</div>
          </FxSplitterPanel>
        </FxSplitter>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const isCollapsible = ref(true)
</script>

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

禁用拖拽

当任意一侧面板禁用 resizable 时，拖拽将被禁用。

<template>
  <FxSwitch
    v-model="resizable"
    active-text="enable"
    inactive-text="disable"
    inline-prompt
    class="mb-2"
  />
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter>
      <FxSplitterPanel>
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel :resizable="resizable">
        <div class="demo-panel">
          drag {{ resizable ? "enable" : "disable" }}
        </div>
      </FxSplitterPanel>
      <FxSplitterPanel>
        <div class="demo-panel">3</div>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const resizable = ref(false)
</script>

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

面板尺寸

通过 v-model:size 可获取/设置面板尺寸。

<template>
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter
      @resize-start="handleResizeStart"
      @resize-end="handleResizeEnd"
      @resize="handleResize"
    >
      <FxSplitterPanel>
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel v-model:size="size" :max="200" :min="50">
        <div class="demo-panel">{{ size }}px</div>
      </FxSplitterPanel>
      <FxSplitterPanel>
        <div class="demo-panel">3</div>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const size = ref(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)
}
</script>

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

懒加载

开启 lazy 后，拖拽过程中面板尺寸不会实时更新，仅在拖拽结束后更新。

<template>
  <div
    style="height: 250px; box-shadow: var(--fx-border-color-light) 0px 0px 10px"
  >
    <FxSplitter lazy>
      <FxSplitterPanel collapsible min="50">
        <div class="demo-panel">1</div>
      </FxSplitterPanel>
      <FxSplitterPanel collapsible>
        <div class="demo-panel">2</div>
      </FxSplitterPanel>
      <FxSplitterPanel collapsible>
        <div class="demo-panel">3</div>
      </FxSplitterPanel>
    </FxSplitter>
  </div>
</template>

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

Splitter API

Attributes

属性	说明	类型	默认值
layout	分割面板布局方向	'horizontal' | 'vertical'	'horizontal'
lazy	是否启用懒加载	boolean	false

Events

事件名	说明	类型
resize-start	开始调整面板尺寸时触发，index 为拖拽条索引	(index: number, sizes: number[]) => void
resize	调整面板尺寸过程中触发，index 为拖拽条索引	(index: number, sizes: number[]) => void
resize-end	调整面板尺寸结束时触发，index 为拖拽条索引	(index: number, sizes: number[]) => void
collapse	面板折叠时触发，index 为拖拽条索引	(index: number, type: 'start' | 'end', sizes: number[]) => void

SplitterPanel API

Attributes

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

Events

事件名	说明	类型
update:size	面板尺寸变化时触发	(size: number) => void

Slots

插槽名	说明
default	面板默认内容
start-collapsible	起始折叠按钮的自定义内容
end-collapsible	结束折叠按钮的自定义内容

Exposes

名称	说明	类型
splitterPanelRef	面板根 HTML 元素	Ref<HTMLDivElement>