Split 面板分割

概述

可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。

代码示例

Split 面板分割 - 图1

左右分割

左右分割用法。

  1. <template>
  2.     <div class="demo-split">
  3.         <Split v-model="split1">
  4.             <div slot="left" class="demo-split-pane">
  5.                 Left Pane
  6.             </div>
  7.             <div slot="right" class="demo-split-pane">
  8.                 Right Pane
  9.             </div>
  10.         </Split>
  11.     </div>
  12. </template>
  13. <script>
  14.     export default {
  15.         data () {
  16.             return {
  17.                 split1: 0.5
  18.             }
  19.         },
  20.     }
  21. </script>
  22. <style>
  23.     .demo-split{
  24.         height: 200px;
  25.         border: 1px solid #dcdee2;
  26.     }
  27.     .demo-split-pane{
  28.         padding: 10px;
  29.     }
  30. </style>

Split 面板分割 - 图2

上下分割

左右分割用法。

  1. <template>
  2.     <div class="demo-split">
  3.         <Split v-model="split2" mode="vertical">
  4.             <div slot="top" class="demo-split-pane">
  5.                 Top Pane
  6.             </div>
  7.             <div slot="bottom" class="demo-split-pane">
  8.                 Bottom Pane
  9.             </div>
  10.         </Split>
  11.     </div>
  12. </template>
  13. <script>
  14.     export default {
  15.         data () {
  16.             return {
  17.                 split2: 0.5
  18.             }
  19.         },
  20.     }
  21. </script>
  22. <style>
  23.     .demo-split{
  24.         height: 200px;
  25.         border: 1px solid #dcdee2;
  26.     }
  27.     .demo-split-pane{
  28.         padding: 10px;
  29.     }
  30. </style>

Split 面板分割 - 图3

嵌套使用

可以嵌套使用。

  1. <template>
  2.     <div class="demo-split">
  3.         <Split v-model="split3">
  4.             <div slot="left" class="demo-split-pane no-padding">
  5.                 <Split v-model="split4" mode="vertical">
  6.                     <div slot="top" class="demo-split-pane">
  7.                         Top Pane
  8.                     </div>
  9.                     <div slot="bottom" class="demo-split-pane">
  10.                         Bottom Pane
  11.                     </div>
  12.                 </Split>
  13.             </div>
  14.             <div slot="right" class="demo-split-pane">
  15.                 Right Pane
  16.             </div>
  17.         </Split>
  18.     </div>
  19. </template>
  20. <script>
  21.     export default {
  22.         data () {
  23.             return {
  24.                 split3: 0.5,
  25.                 split4: 0.5
  26.             }
  27.         },
  28.     }
  29. </script>
  30. <style>
  31.     .demo-split{
  32.         height: 200px;
  33.         border: 1px solid #dcdee2;
  34.     }
  35.     .demo-split-pane{
  36.         padding: 10px;
  37.     }
  38.     .demo-split-pane.no-padding{
  39.         height: 200px;
  40.         padding: 0;
  41.     }
  42. </style>

API

Split props

属性 说明 类型 默认值
value 面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定 Number | String 0.5
mode 类型，可选值为 horizontal 或 vertical String horizontal
min 最小阈值 Number | String 40px
max 最大阈值 Number | String 40px

Split events

事件名 说明 返回值
on-move-start 拖拽开始 -
on-moving 拖拽中 event
on-move-end 拖拽结束 -

Split slot

名称 说明
left mode 为 horizontal 时可用，左边面板
right mode 为 horizontal 时可用，右边面板
top mode 为 vertical 时可用，上边面板
bottom mode 为 vertical 时可用，下边面板
trigger 自定义分割拖拽节点