Splitter 分割面板

基础用法

Left

Right

<template>
  <lb-splitter style="height: 300px; border: 1px solid #dcdfe6">
    <lb-splitter-panel>
      <div class="content">Left</div>
    </lb-splitter-panel>
    <lb-splitter-panel>
      <div class="content">Right</div>
    </lb-splitter-panel>
  </lb-splitter>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
}
</style>

折叠功能

Left Panel

Right Panel

<template>
  <lb-splitter style="height: 300px; border: 1px solid #dcdfe6">
    <lb-splitter-panel :size="200">
      <div class="content">Left Panel</div>
    </lb-splitter-panel>
    <lb-splitter-panel :size="200">
      <div class="content">Right Panel</div>
    </lb-splitter-panel>
  </lb-splitter>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
}
</style>

垂直分割

Top

Bottom

<template>
  <lb-splitter direction="vertical" style="height: 300px; border: 1px solid #dcdfe6">
    <lb-splitter-panel>
      <div class="content">Top</div>
    </lb-splitter-panel>
    <lb-splitter-panel>
      <div class="content">Bottom</div>
    </lb-splitter-panel>
  </lb-splitter>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
}
</style>

最小/最大尺寸

Left Panel (min: 100px, max: 300px)

Right Panel

<template>
  <lb-splitter style="height: 300px; border: 1px solid #dcdfe6">
    <lb-splitter-panel :min-size="100" :max-size="300">
      <div class="content">Left Panel (min: 100px, max: 300px)</div>
    </lb-splitter-panel>
    <lb-splitter-panel>
      <div class="content">Right Panel</div>
    </lb-splitter-panel>
  </lb-splitter>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
}
</style>

嵌套使用

Outer Left

Inner Top

Inner Bottom

<template>
  <lb-splitter style="height: 300px; border: 1px solid #dcdfe6">
    <lb-splitter-panel>
      <div class="content">Outer Left</div>
    </lb-splitter-panel>
    <lb-splitter-panel>
      <lb-splitter direction="vertical" style="height: 100%;">
        <lb-splitter-panel>
          <div class="content">Inner Top</div>
        </lb-splitter-panel>
        <lb-splitter-panel>
          <div class="content">Inner Bottom</div>
        </lb-splitter-panel>
      </lb-splitter>
    </lb-splitter-panel>
  </lb-splitter>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
}
</style>

Splitter

Attributes

Attribute	Description	Type	Accepted Values	Default
direction	分割方向	horizontal / vertical	horizontal / vertical	horizontal
dragging	是否可拖拽	boolean	true / false	true

Events

Event Name	Description	Parameters
resize	拖拽分割条时触发	(sizes: number[])

SplitterPanel

Attributes

Attribute	Description	Type	Accepted Values	Default
size	面板大小	number	—	undefined
minSize	最小尺寸	number	—	0
maxSize	最大尺寸	number	—	Infinity
resizeabel	是否可调整大小	boolean	true / false	true