全局代码格式 优化

src/components/SplitPane/Pane.vue

@@ -1,41 +1,44 @@
 <template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
+	<div :class="classes">
+		<slot></slot>
+	</div>
 </template>
 
 <script>
-    export default {
-      name: 'Pane',
-      data() {
-        const classes = ['Pane', this.$parent.split, 'className'];
-        return {
-          classes: classes.join(' '),
-          percent: 50
-        }
-      }
+	export default {
+	  name: 'Pane',
+	  data() {
+	    const classes = ['Pane', this.$parent.split, 'className'];
+    return {
+	      classes: classes.join(' '),
+	      percent: 50
     }
+  }
+	}
 </script>
 
-<style>
-    .splitter-pane.vertical.splitter-paneL{
-        position: absolute;
-        left: 0px;
-        height: 100%;
-    }
-    .splitter-pane.vertical.splitter-paneR{
-        position: absolute;
-        right: 0px;
-        height: 100%;
-    }
-    .splitter-pane.horizontal.splitter-paneL{
-        position: absolute;
-        top: 0px;
-        width: 100%;
-    }
-    .splitter-pane.horizontal.splitter-paneR{
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-    }
+<style scoped>
+.splitter-pane.vertical.splitter-paneL {
+    position: absolute;
+    left: 0px;
+    height: 100%;
+}
+
+.splitter-pane.vertical.splitter-paneR {
+    position: absolute;
+    right: 0px;
+    height: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneL {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneR {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
 </style>

src/components/SplitPane/Resizer.vue

@@ -1,71 +1,72 @@
 <template>
-    <div :class="classes" @mousedown="onMouseDown"></div>
+	<div :class="classes" @mousedown="onMouseDown"></div>
 </template>
+
 <script>
-    export default {
-      props: {
-        split: {
-          validator(value) {
-            return ['vertical', 'horizontal'].indexOf(value) >= 0
-          },
-          required: true
+  export default {
+    props: {
+      split: {
+        validator(value) {
+          return ['vertical', 'horizontal'].indexOf(value) >= 0
         },
-        onMouseDown: {
-          type: Function,
-          required: true
-        }
+        required: true
       },
-      data() {
-        const classes = ['Resizer', this.split, 'className'];
-        return {
-          classes: classes.join(' ')
-        }
+      onMouseDown: {
+        type: Function,
+        required: true
+      }
+    },
+    data() {
+      const classes = ['Resizer', this.split, 'className'];
+      return {
+        classes: classes.join(' ')
       }
     }
+  }
 </script>
+
 <style scoped>
-    .Resizer {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        background: #000;
-        position: absolute;
-        opacity: .2;
-        z-index: 1;
-        /*-moz-background-clip: padding;*/
-        /*-webkit-background-clip: padding;*/
-        /*background-clip: padding-box;*/
-    }
+.Resizer {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	background: #000;
+	position: absolute;
+	opacity: .2;
+	z-index: 1;
+	/*-moz-background-clip: padding;*/
+	/*-webkit-background-clip: padding;*/
+	/*background-clip: padding-box;*/
+}
+/*.Resizer:hover {*/
+/*-webkit-transition: all 2s ease;*/
+/*transition: all 2s ease;*/
+/*}*/
 
-    /*.Resizer:hover {*/
-        /*-webkit-transition: all 2s ease;*/
-        /*transition: all 2s ease;*/
-    /*}*/
+.Resizer.horizontal {
+	height: 11px;
+	margin: -5px 0;
+	border-top: 5px solid rgba(255, 255, 255, 0);
+	border-bottom: 5px solid rgba(255, 255, 255, 0);
+	cursor: row-resize;
+	width: 100%;
+}
 
-    .Resizer.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-    }
+.Resizer.horizontal:hover {
+	border-top: 5px solid rgba(0, 0, 0, 0.5);
+	border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
 
-    .Resizer.horizontal:hover {
-        border-top: 5px solid rgba(0, 0, 0, 0.5);
-        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
+.Resizer.vertical {
+	width: 11px;
+	height: 100%;
+	border-left: 5px solid rgba(255, 255, 255, 0);
+	border-right: 5px solid rgba(255, 255, 255, 0);
+	cursor: col-resize;
+}
 
-    .Resizer.vertical {
-        width: 11px;
-        height: 100%;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-    }
-
-    .Resizer.vertical:hover {
-        border-left: 5px solid rgba(0, 0, 0, 0.5);
-        border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
+.Resizer.vertical:hover {
+	border-left: 5px solid rgba(0, 0, 0, 0.5);
+	border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
 </style>

src/components/SplitPane/index.vue

@@ -1,111 +1,111 @@
 <template>
-    <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp"
-         @mousemove="onMouseMove">
-        <Pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
-            <slot name="paneL"></slot>
-        </Pane>
-        <Resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown"
-                 @click="onClick"></Resizer>
-        <Pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
-            <slot name="paneR"></slot>
-        </Pane>
-    </div>
+  <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
+    <pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
+      <slot name="paneL"></slot>
+    </pane>
+    <resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick"></resizer>
+    <pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
+      <slot name="paneR"></slot>
+    </pane>
+  </div>
 </template>
-<style scoped>
-    .clearfix:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
-    .vue-splitter-container {
-        height: 100%;
-        /*display: flex;*/
-        position: relative;
-    }
-</style>
 
 <script>
-    import Resizer from './Resizer';
-    import Pane from './Pane';
-    export default {
-      name: 'splitPane',
-      components: { Resizer, Pane },
-      props: {
-        margin: {
-          type: Number,
-          default: 10
+  import Resizer from './Resizer';
+  import Pane from './Pane';
+  export default {
+    name: 'splitPane',
+    components: { Resizer, Pane },
+    props: {
+      margin: {
+        type: Number,
+        default: 10
+      },
+      split: {
+        validator(value) {
+          return ['vertical', 'horizontal'].indexOf(value) >= 0
         },
-        split: {
-          validator(value) {
-            return ['vertical', 'horizontal'].indexOf(value) >= 0
-          },
-          required: true
+        required: true
+      }
+    },
+    data() {
+      return {
+        active: false,
+        hasMoved: false,
+        height: null,
+        percent: 50,
+        type: this.split === 'vertical' ? 'width' : 'height',
+        resizeType: this.split === 'vertical' ? 'left' : 'top'
+      }
+    },
+    computed: {
+      userSelect() {
+        return this.active ? 'none' : ''
+      },
+      cursor() {
+        return this.active ? 'col-resize' : ''
+      }
+    },
+    methods: {
+      onClick() {
+        if (!this.hasMoved) {
+          this.percent = 50;
+          this.$emit('resize');
         }
       },
-      data() {
-        return {
-          active: false,
-          hasMoved: false,
-          height: null,
-          percent: 50,
-          type: this.split === 'vertical' ? 'width' : 'height',
-          resizeType: this.split === 'vertical' ? 'left' : 'top'
-        }
+      onMouseDown() {
+        this.active = true;
+        this.hasMoved = false;
       },
-      computed: {
-        userSelect() {
-          return this.active ? 'none' : ''
-        },
-        cursor() {
-          return this.active ? 'col-resize' : ''
-        }
+      onMouseUp() {
+        this.active = false;
       },
-      methods: {
-        onClick() {
-          if (!this.hasMoved) {
-            this.percent = 50;
-            this.$emit('resize');
-          }
-        },
-        onMouseDown() {
-          this.active = true;
-          this.hasMoved = false;
-        },
-        onMouseUp() {
+      onMouseMove(e) {
+        if (e.buttons === 0 || e.which === 0) {
           this.active = false;
-        },
-        onMouseMove(e) {
-          if (e.buttons === 0 || e.which === 0) {
-            this.active = false;
-          }
-          if (this.active) {
-            let offset = 0;
-            let target = e.currentTarget;
-            if (this.split === 'vertical') {
-              while (target) {
-                offset += target.offsetLeft;
-                target = target.offsetParent;
-              }
-            } else {
-              while (target) {
-                offset += target.offsetTop;
-                target = target.offsetParent;
-              }
+        }
+        if (this.active) {
+          let offset = 0;
+          let target = e.currentTarget;
+          if (this.split === 'vertical') {
+            while (target) {
+              offset += target.offsetLeft;
+              target = target.offsetParent;
             }
+          } else {
+            while (target) {
+              offset += target.offsetTop;
+              target = target.offsetParent;
+            }
+          }
 
-            const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
-            const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
-            const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
-            if (percent > this.margin && percent < 100 - this.margin) {
-              this.percent = percent;
-            }
-            this.$emit('resize');
-            this.hasMoved = true;
+          const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
+          const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
+          const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
+          if (percent > this.margin && percent < 100 - this.margin) {
+            this.percent = percent;
           }
+          this.$emit('resize');
+          this.hasMoved = true;
         }
       }
     }
+  }
 </script>
+
+<style scoped>
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.vue-splitter-container {
+  height: 100%;
+  /*display: flex;*/
+  position: relative;
+}
+</style>