BIN-UI-DESIGN

Appearance

On this page

分割面板 Split ​

分割面板可自行拖放宽度/高度

基础用法 ​

左侧容器
右侧容器
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <div class="right-container">右侧容器</div>
      </template>
    </b-split>
  </div>
</template>
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <div class="right-container">右侧容器</div>
      </template>
    </b-split>
  </div>
</template>

水平分割 ​

上边容器
下面容器
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split split="horizontal" :default="100">
      <template #left>
        <div class="left-container">上边容器</div>
      </template>
      <template #right>
        <div class="right-container">下面容器</div>
      </template>
    </b-split>
  </div>
</template>
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split split="horizontal" :default="100">
      <template #left>
        <div class="left-container">上边容器</div>
      </template>
      <template #right>
        <div class="right-container">下面容器</div>
      </template>
    </b-split>
  </div>
</template>

嵌套使用 ​

左侧容器
上部容器
下部容器
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <b-split split="horizontal" :default="100">
          <template #left>
            <div class="top-container">上部容器</div>
          </template>
          <template #right>
            <div class="bottom-container">下部容器</div>
          </template>
        </b-split>
      </template>
    </b-split>
  </div>
</template>
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <b-split split="horizontal" :default="100">
          <template #left>
            <div class="top-container">上部容器</div>
          </template>
          <template #right>
            <div class="bottom-container">下部容器</div>
          </template>
        </b-split>
      </template>
    </b-split>
  </div>
</template>

设置默认样式 ​

如设置了默认样式，双击分割线可重置默认设置的大小。

左侧容器
上边容器
下面容器
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split :default-wrap-style="['20%', '80%']">
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <b-split split="horizontal" :default="100" :default-wrap-style="['50%', '50%']">
          <template #left>
            <div class="left-container">上边容器</div>
          </template>
          <template #right>
            <div class="right-container">下面容器</div>
          </template>
        </b-split>
      </template>
    </b-split>
  </div>
</template>
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split :default-wrap-style="['20%', '80%']">
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <b-split split="horizontal" :default="100" :default-wrap-style="['50%', '50%']">
          <template #left>
            <div class="left-container">上边容器</div>
          </template>
          <template #right>
            <div class="right-container">下面容器</div>
          </template>
        </b-split>
      </template>
    </b-split>
  </div>
</template>

隐藏分割线 ​

左侧容器
下面容器
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split :default="240" hide-line>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <div class="right-container">下面容器</div>
      </template>
    </b-split>
  </div>
</template>
<template>
  <div style="width: 100%; height: 300px; border: 1px solid #ddd">
    <b-split :default="240" hide-line>
      <template #left>
        <div class="left-container">左侧容器</div>
      </template>
      <template #right>
        <div class="right-container">下面容器</div>
      </template>
    </b-split>
  </div>
</template>

Props ​

参数说明类型可选值默认值
split分割类型String'vertical', 'horizontal'vertical
min最小像素Number—60
default默认百分比Number—200
default-wrap-style默认容器样式 ,一个数组，可分别指定两个容器大小，可为像素或百分比，开始时生效Array[]——
hide-line是否隐藏分割线Boolean—false
resizer-color自定义分割线颜色（自定义颜色后hide-line不生效）String——
class-name自定义resizer样式名称String——

Events ​

事件名说明返回值
resize重置大小percent

Slot ​

名称说明
leftsplit 为 vertical 时左边面板 horizontal 时为上边面板
rightsplit 为 vertical 时右边面板 horizontal 时为下边面板

MIT Licensed | Copyright © 2023-present bin-ui-design