cnbmai-ui-doc/src/views/splitPane/splitPane.vue

<template>
  <div class="split-page">
    <h2>可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。</h2>
    <div class="demo-box">
      <h3>左右分割</h3>
      <div class="split">
        <SplitPane v-model="split1">
          <template #left>
            <div class="split-pane">Left Pane</div>
          </template>
          <template #right>
            <div class="split-pane">Right Pane</div>
          </template>
        </SplitPane>
      </div>
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div>
            <pre>
              &lt;div class="split"&gt;
                &lt;SplitPane v-model="split1"&gt;
                  &lt;template #left&gt;
                    &lt;div class="split-pane"&gt;Left Pane&lt;/div&gt;
                  &lt;/template&gt;
                  &lt;template #right&gt;
                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
                  &lt;/template&gt;
                &lt;/SplitPane&gt;
              &lt;/div&gt;
              data() {
                return {
                  split1: 0.5
                }
              }
              .split {
                height: 200px;
                border: 1px solid #dcdee2;
              }
              .split-pane {
                padding: 20px;
              }
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>上下分割</h3>
      <div class="split">
        <SplitPane v-model="split2" mode="vertical">
          <template #top>
            <div class="split-pane">Left Pane</div>
          </template>
          <template #bottom>
            <div class="split-pane">Right Pane</div>
          </template>
        </SplitPane>
      </div>
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div>
            <pre>
              &lt;div class="split" mode="vertical"&gt;
                &lt;SplitPane v-model="split2"&gt;
                  &lt;template #top&gt;
                    &lt;div class="split-pane"&gt;Left Pane&lt;/div&gt;
                  &lt;/template&gt;
                  &lt;template #bottom&gt;
                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
                  &lt;/template&gt;
                &lt;/SplitPane&gt;
              &lt;/div&gt;
              data() {
                return {
                  split2: 0.5
                }
              }
              .split {
                height: 200px;
                border: 1px solid #dcdee2;
              }
              .split-pane {
                padding: 20px;
              }
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>嵌套使用</h3>
      <div class="split">
        <SplitPane v-model="split3">
          <template #left>
            <div class="split-pane no-padding">
              <SplitPane v-model="split4" mode="vertical">
                <template #top>
                  <div class="split-pane">Top Pane</div>
                </template>
                <template #bottom>
                  <div class="split-pane">Bottom Pane</div>
                </template>
              </SplitPane>
            </div>
          </template>
          <template #right>
            <div class="split-pane">Right Pane</div>
          </template>
        </SplitPane>
      </div>
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div>
            <pre>
              &lt;div class="split"&gt;
                &lt;SplitPane v-model="split3"&gt;
                  &lt;template #left&gt;
                    &lt;div class="split-pane no-padding"&gt;
                      &lt;SplitPane v-model="split4" mode="vertical"&gt;
                        &lt;template #top&gt;
                          &lt;div class="split-pane"&gt;Top Pane&lt;/div&gt;
                        &lt;/template&gt;
                        &lt;template #bottom&gt;
                          &lt;div class="split-pane"&gt;Bottom Pane&lt;/div&gt;
                        &lt;/template&gt;
                      &lt;/SplitPane&gt;
                    &lt;/div&gt;
                  &lt;/template&gt;
                  &lt;template #right&gt;
                    &lt;div class="split-pane"&gt;Right Pane&lt;/div&gt;
                  &lt;/template&gt;
                &lt;/SplitPane&gt;
              &lt;/div&gt;
              data() {
                return {
                  split3: 0.5,
                  split4: 0.5
                }
              }
              .split {
                height: 200px;
                border: 1px solid #dcdee2;
              }
              .split-pane {
                padding: 20px;
              }
              .split-pane.no-padding {
                height: 200px;
                padding: 0;
              }
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div>
      <h3>API</h3>
      <h4>SplitPane Props</h4>
      <base-table :table-props="tableProps1" :table-data="tableData1" />
      <h4>SplitPane Events</h4>
      <base-table :table-props="tableProps2" :table-data="tableData2" />
      <h4>SplitPane Slots</h4>
      <base-table :table-props="tableProps3" :table-data="tableData3" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'splitPane',
  data() {
    return {
      split1: 0.5,
      split2: 0.5,
      split3: 0.5,
      split4: 0.5,
      tableProps1: [
        {
          prop: 'a1',
          label: '属性'
        },
        {
          prop: 'a2',
          label: '说明',
          minWidth: 200
        },
        {
          prop: 'a3',
          label: '类型'
        },
        {
          prop: 'a4',
          label: '默认值'
        }
      ],
      tableData1: [
        {
          a1: 'model-value',
          a2: '面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定',
          a3: 'Number | String',
          a4: '0.5'
        },
        {
          a1: 'mode',
          a2: '类型，可选值为 horizontal 或 vertical',
          a3: 'String',
          a4: 'horizontal'
        },
        {
          a1: 'min',
          a2: '最小阈值',
          a3: 'Number | String',
          a4: '40px'
        },
        {
          a1: 'max',
          a2: '最大阈值',
          a3: 'Number | String',
          a4: '40px'
        }
      ],
      tableProps2: [
        {
          prop: 'a1',
          label: '事件名'
        },
        {
          prop: 'a2',
          label: '说明'
        },
        {
          prop: 'a3',
          label: '返回值'
        }
      ],
      tableData2: [
        {
          a1: 'on-move-start',
          a2: '拖拽开始',
          a3: '-'
        },
        {
          a1: 'on-moving',
          a2: '拖拽中',
          a3: 'event'
        },
        {
          a1: 'on-move-end',
          a2: '拖拽结束',
          a3: '-'
        }
      ],
      tableProps3: [
        {
          prop: 'a1',
          label: '名称'
        },
        {
          prop: 'a2',
          label: '说明'
        }
      ],
      tableData3: [
        {
          a1: 'left',
          a2: 'mode 为 horizontal 时可用，左边面板'
        },
        {
          a1: 'right',
          a2: 'mode 为 horizontal 时可用，右边面板'
        },
        {
          a1: 'top',
          a2: 'mode 为 vertical 时可用，上边面板'
        },
        {
          a1: 'bottom',
          a2: 'mode 为 vertical 时可用，下边面板'
        },
        {
          a1: 'trigger',
          a2: '自定义分割拖拽节点'
        }
      ]
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.split-page {
  .demo-box {
    margin-bottom: 40px;
    .split {
      height: 200px;
      border: 1px solid #dcdee2;
    }
    .split-pane {
      padding: 20px;
    }
    .split-pane.no-padding {
      height: 200px;
      padding: 0;
    }
  }
}
</style>