Split code format

examples/routers/split.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-export default {
+    export default {
         name: 'split_pane_page',
         data () {
             return {
@@ -29,35 +29,36 @@ export default {
                 console.log(e.atMin, e.atMax)
             }
         }
-}
+    }
 </script>
 
 <style lang="less">
-.center-middle{
+    .center-middle {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-}
-.split-pane-page-wrapper{
+    }
+
+    .split-pane-page-wrapper {
         height: 600px;
-  .pane{
+        .pane {
             width: 100%;
             height: 100%;
-    &.left-pane{
+            &.left-pane {
                 background: sandybrown;
             }
-    &.right-pane{
+            &.right-pane {
                 background: palevioletred;
             }
-    &.top-pane{
+            &.top-pane {
                 background: sandybrown;
             }
-    &.bottom-pane{
+            &.bottom-pane {
                 background: palevioletred;
             }
         }
-  .custom-trigger{
+        .custom-trigger {
             width: 20px;
             height: 20px;
             border-radius: 50%;
@@ -66,9 +67,9 @@ export default {
             .center-middle;
             box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
             cursor: row-resize;
-    i.trigger-icon{
+            i.trigger-icon {
                 .center-middle;
             }
         }
-}
+    }
 </style>

src/components/split/split.vue

@@ -1,31 +1,39 @@
 <template>
     <div ref="outerWrapper" :class="wrapperClasses">
         <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
-      <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
+            <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']">
+                <slot name="left"/>
+            </div>
             <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
                 <slot name="trigger">
                     <trigger mode="vertical"/>
                 </slot>
             </div>
-      <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
+            <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']">
+                <slot name="right"/>
+            </div>
         </div>
         <div v-else :class="`${prefix}-vertical`">
-      <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
+            <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']">
+                <slot name="top"/>
+            </div>
             <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
                 <slot name="trigger">
                     <trigger mode="horizontal"/>
                 </slot>
             </div>
-      <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
+            <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']">
+                <slot name="bottom"/>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { oneOf } from '../../utils/assist';
-import { on, off } from '../../utils/dom';
-import Trigger from './trigger.vue';
-export default {
+    import {oneOf} from '../../utils/assist';
+    import {on, off} from '../../utils/dom';
+    import Trigger from './trigger.vue';
+    export default {
         name: 'Split',
         components: {
             Trigger
@@ -151,5 +159,5 @@ export default {
                 this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
             });
         }
-};
+    };
 </script>

src/components/split/trigger.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-export default {
+    export default {
         name: 'Trigger',
         props: {
             mode: String
@@ -35,5 +35,5 @@ export default {
                 ];
             }
         }
-};
+    };
 </script>