From 60dab14a5741d5989724114b6594557f9958fffa Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Tue, 28 Feb 2023 14:58:40 +0800
Subject: [PATCH] splitPane

---
 package-lock.json                 |  14 +-
 package.json                      |   2 +-
 src/router/index.js               |  18 ++
 src/views/home/introduce.vue      |   9 +-
 src/views/splitPane/splitPane.vue | 306 ++++++++++++++++++++++++++++++
 5 files changed, 340 insertions(+), 9 deletions(-)
 create mode 100644 src/views/splitPane/splitPane.vue

diff --git a/package-lock.json b/package-lock.json
index a078555..3c974bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "code-brick-wd",
       "version": "0.1.0",
       "dependencies": {
-        "code-brick-zj": "^0.0.7",
+        "code-brick-zj": "^0.1.0",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.12",
         "vue": "^2.6.14",
@@ -4007,9 +4007,9 @@
       }
     },
     "node_modules/code-brick-zj": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
-      "integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
+      "integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -14473,9 +14473,9 @@
       }
     },
     "code-brick-zj": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
-      "integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
+      "integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
     },
     "color-convert": {
       "version": "1.9.3",
diff --git a/package.json b/package.json
index 014de0d..87af197 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "code-brick-zj": "^0.0.7",
+    "code-brick-zj": "^0.1.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.12",
     "vue": "^2.6.14",
diff --git a/src/router/index.js b/src/router/index.js
index 299f497..dc3035b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -112,6 +112,24 @@ export const routes = [
       }
     ]
   },
+  {
+    path: '/splitPane',
+    component: Layout,
+    name: 'splitPane',
+    meta: {
+      title: '分割面板'
+    },
+    children: [
+      {
+        path: 'splitPane',
+        name: 'splitPane',
+        meta: {
+          title: '分割面板'
+        },
+        component: () => import('../views/splitPane/splitPane')
+      }
+    ]
+  },
   { path: '*', redirect: '/home/introduce', hidden: true }
 ]
 
diff --git a/src/views/home/introduce.vue b/src/views/home/introduce.vue
index ff74511..a6d67cb 100644
--- a/src/views/home/introduce.vue
+++ b/src/views/home/introduce.vue
@@ -3,9 +3,16 @@
     <p>
       组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
     </p>
-    <p>文档当前使用的组件包的版本为：0.0.7</p>
+    <p>文档当前使用的组件包的版本为：0.1.0</p>
     <div class="block">
       <el-timeline>
+        <el-timeline-item timestamp="2023/2/28" placement="top">
+          <el-card>
+            <h4>新增</h4>
+            <h4>增加组件SplitPane,可以拖动来调整面板的大小</h4>
+            <p>组件版本号为：0.1.0</p>
+          </el-card>
+        </el-timeline-item>
         <el-timeline-item timestamp="2023/1/10" placement="top">
           <el-card>
             <h4>修改</h4>
diff --git a/src/views/splitPane/splitPane.vue b/src/views/splitPane/splitPane.vue
new file mode 100644
index 0000000..60a0041
--- /dev/null
+++ b/src/views/splitPane/splitPane.vue
@@ -0,0 +1,306 @@
+<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>