init

src/components/SplitPane/Resizer.vue

@@ -0,0 +1,75 @@
+<template>
+    <div :class="classes" @mousedown="onMouseDown"></div>
+</template>
+<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: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: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%;
+        /*margin: 0 -5px;*/
+
+        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);
+    }
+</style>
+<script>
+    export default {
+      props: {
+        split: {
+          validator(value) {
+            return ['vertical', 'horizontal'].indexOf(value) >= 0
+          },
+          required: true
+        },
+        onMouseDown: {
+          type: Function,
+          required: true
+        }
+      },
+      data() {
+        const classes = ['Resizer', this.split, 'className'];
+        return {
+          classes: classes.join(' ')
+        }
+      },
+
+      methods: {}
+    }
+</script>