From 1e9bece0c1c3fe975096db4933a9d21b0f21203e Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Sat, 30 Jun 2018 16:23:52 +0800
Subject: [PATCH] update Split

---
 examples/routers/split.vue       |  27 +++++++++++++++------------
 src/components/split/split.vue   |  16 ++++++++++++----
 src/styles/components/split.less | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------
 3 files changed, 129 insertions(+), 112 deletions(-)

diff --git a/examples/routers/split.vue b/examples/routers/split.vue
index 106327a..1b93235 100644
--- a/examples/routers/split.vue
+++ b/examples/routers/split.vue
@@ -1,16 +1,12 @@
 <template>
-    <div class="split-pane-page-wrapper">
-        <Split v-model="offset" @on-moving="handleMoving">
-            <div slot="left" class="pane left-pane">
-                <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
-                    <div slot="top" class="pane top-pane"></div>
-                    <div slot="bottom" class="pane bottom-pane"></div>
-                    <div slot="trigger" class="custom-trigger">
-                        <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
-                    </div>
-                </Split>
+    <div class="demo-split">
+        <Split v-model="split1">
+            <div slot="left" class="demo-split-pane">
+                左边面板
+            </div>
+            <div slot="right" class="demo-split-pane">
+                右边面板
             </div>
-            <div slot="right" class="pane right-pane"></div>
         </Split>
     </div>
 </template>
@@ -21,7 +17,8 @@
         data () {
             return {
                 offset: 0.6,
-                offsetVertical: '250px'
+                offsetVertical: '250px',
+                split1: 0.5
             }
         },
         methods: {
@@ -73,3 +70,9 @@
         }
     }
 </style>
+<style>
+    .demo-split{
+        height: 300px;
+        border: 1px solid #dddee1;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/split/split.vue b/src/components/split/split.vue
index 7547ccd..8482140 100644
--- a/src/components/split/split.vue
+++ b/src/components/split/split.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="outerWrapper" :class="wrapperClasses">
         <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
-            <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
+            <div :style="{right: `${anotherOffset}%`}" class="left-pane" :class="paneClasses">
                 <slot name="left"/>
             </div>
             <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
@@ -9,12 +9,12 @@
                     <trigger mode="vertical"/>
                 </slot>
             </div>
-            <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
+            <div :style="{left: `${offset}%`}" class="right-pane" :class="paneClasses">
                 <slot name="right"/>
             </div>
         </div>
         <div v-else :class="`${prefix}-vertical`">
-            <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
+            <div :style="{bottom: `${anotherOffset}%`}" class="top-pane" :class="paneClasses">
                 <slot name="top"/>
             </div>
             <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
@@ -22,7 +22,7 @@
                     <trigger mode="horizontal"/>
                 </slot>
             </div>
-            <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
+            <div :style="{top: `${offset}%`}" class="bottom-pane" :class="paneClasses">
                 <slot name="bottom"/>
             </div>
         </div>
@@ -79,6 +79,14 @@
                     this.isMoving ? 'no-select' : ''
                 ];
             },
+            paneClasses () {
+                return [
+                    `${this.prefix}-pane`,
+                    {
+                        [`${this.prefix}-pane-moving`]: this.isMoving
+                    }
+                ];
+            },
             isHorizontal () {
                 return this.mode === 'horizontal';
             },
diff --git a/src/styles/components/split.less b/src/styles/components/split.less
index 0b5e81d..28ec2b9 100644
--- a/src/styles/components/split.less
+++ b/src/styles/components/split.less
@@ -9,106 +9,112 @@
 @trigger-bar-weight: 1px;
 @trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
 
-.@{split-prefix-cls}{
-  &-wrapper{
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  &-pane{
-    position: absolute;
-    &.left-pane, &.right-pane{
-      top: 0px;
-      bottom: 0px;
+.@{split-prefix-cls} {
+    &-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
     }
-    &.left-pane{
-      left: 0px;
-    }
-    &.right-pane{
-      right: 0px;
-    }
-    &.top-pane, &.bottom-pane{
-      left: 0px;
-      right: 0px;
-    }
-    &.top-pane{
-      top: 0px;
-    }
-    &.bottom-pane{
-      bottom: 0px;
-    }
-  }
-  &-trigger{
-    &-con{
-      position: absolute;
-      transform: translate(-50%, -50%);
-      z-index: 10;
-    }
-    &-bar-con{
-      position: absolute;
-      overflow: hidden;
-      &.vertical{
-        left: @trigger-bar-offset;
-        top: 50%;
-        height: @trigger-bar-con-height;
-        transform: translate(0, -50%);
-      }
-      &.horizontal{
-        left: 50%;
-        top: @trigger-bar-offset;
-        width: @trigger-bar-con-height;
-        transform: translate(-50%, 0);
-      }
+    &-pane {
+        position: absolute;
+        &.left-pane, &.right-pane {
+            top: 0;
+            bottom: 0;
+        }
+        &.left-pane {
+            left: 0;
+        }
+        &.right-pane {
+            right: 0;
+        }
+        &.top-pane, &.bottom-pane {
+            left: 0;
+            right: 0;
+        }
+        &.top-pane {
+            top: 0;
+        }
+        &.bottom-pane {
+            bottom: 0;
+        }
+
+        &-moving{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
     }
-    &-vertical{
-      width: @trigger-width;
-      height: 100%;
-      background: @trigger-background;
-      box-shadow: @box-shadow;
-      cursor: col-resize;
-      .@{split-prefix-cls}-trigger-bar{
-        width: @trigger-bar-width;
-        height: 1px;
-        background: @trigger-bar-background;
-        float: left;
-        margin-top: @trigger-bar-interval;
-      }
+    &-trigger {
+        &-con {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            z-index: 10;
+        }
+        &-bar-con {
+            position: absolute;
+            overflow: hidden;
+            &.vertical {
+                left: @trigger-bar-offset;
+                top: 50%;
+                height: @trigger-bar-con-height;
+                transform: translate(0, -50%);
+            }
+            &.horizontal {
+                left: 50%;
+                top: @trigger-bar-offset;
+                width: @trigger-bar-con-height;
+                transform: translate(-50%, 0);
+            }
+        }
+        &-vertical {
+            width: @trigger-width;
+            height: 100%;
+            background: @trigger-background;
+            box-shadow: @box-shadow;
+            cursor: col-resize;
+            .@{split-prefix-cls}-trigger-bar {
+                width: @trigger-bar-width;
+                height: 1px;
+                background: @trigger-bar-background;
+                float: left;
+                margin-top: @trigger-bar-interval;
+            }
+        }
+        &-horizontal {
+            height: @trigger-width;
+            width: 100%;
+            background: @trigger-background;
+            box-shadow: @box-shadow;
+            cursor: row-resize;
+            .@{split-prefix-cls}-trigger-bar {
+                height: @trigger-bar-width;
+                width: 1px;
+                background: @trigger-bar-background;
+                float: left;
+                margin-right: @trigger-bar-interval;
+            }
+        }
     }
-    &-horizontal{
-      height: @trigger-width;
-      width: 100%;
-      background: @trigger-background;
-      box-shadow: @box-shadow;
-      cursor: row-resize;
-      .@{split-prefix-cls}-trigger-bar{
-        height: @trigger-bar-width;
-        width: 1px;
-        background: @trigger-bar-background;
-        float: left;
-        margin-right: @trigger-bar-interval;
-      }
+    &-horizontal {
+        .@{split-prefix-cls}-trigger-con {
+            top: 50%;
+            height: 100%;
+            width: 0;
+        }
     }
-  }
-  &-horizontal{
-    .@{split-prefix-cls}-trigger-con{
-      top: 50%;
-      height: 100%;
-      width: 0;
+    &-vertical {
+        .@{split-prefix-cls}-trigger-con {
+            left: 50%;
+            height: 0;
+            width: 100%;
+        }
     }
-  }
-  &-vertical{
-    .@{split-prefix-cls}-trigger-con{
-      left: 50%;
-      height: 0;
-      width: 100%;
+    .no-select {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
     }
-  }
-  .no-select{
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
 }
--
libgit2 0.21.4