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 | String0.5
mode类型,可选值为 horizontal 或 verticalStringhorizontal
min最小阈值Number | String40px
max最大阈值Number | String40px

Split events

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

Split slot

名称说明
leftmode 为 horizontal 时可用,左边面板
rightmode 为 horizontal 时可用,右边面板
topmode 为 vertical 时可用,上边面板
bottommode 为 vertical 时可用,下边面板
trigger自定义分割拖拽节点