update Split

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 class="demo-split">
+        <Split v-model="split1">
+            <div slot="left" class="demo-split-pane">
+                左边面板
             </div>
-                </Split>
+            <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>

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';
             },

src/styles/components/split.less

@@ -18,24 +18,31 @@
     &-pane {
         position: absolute;
         &.left-pane, &.right-pane {
-      top: 0px;
-      bottom: 0px;
+            top: 0;
+            bottom: 0;
         }
         &.left-pane {
-      left: 0px;
+            left: 0;
         }
         &.right-pane {
-      right: 0px;
+            right: 0;
         }
         &.top-pane, &.bottom-pane {
-      left: 0px;
-      right: 0px;
+            left: 0;
+            right: 0;
         }
         &.top-pane {
-      top: 0px;
+            top: 0;
         }
         &.bottom-pane {
-      bottom: 0px;
+            bottom: 0;
+        }
+
+        &-moving{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
     }
     &-trigger {
@@ -106,7 +113,6 @@
     .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;