refactor:views/components

src/views/components-demo/splitpane.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="components-container">
+		<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>就不会陌生了
+      <a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地址</a>
+      </code>
+		<split-pane v-on:resize="resize" split="vertical">
+			<template slot="paneL">
+				<div class="left-container"></div>
+			</template>
+			<template slot="paneR">
+				<split-pane split="horizontal">
+					<template slot="paneL">
+						<div class="top-container"></div>
+					</template>
+					<template slot="paneR">
+						<div class="bottom-container">
+						</div>
+					</template>
+				</split-pane>
+			</template>
+		</split-pane>
+	</div>
+</template>
+
+<script>
+import splitPane from 'vue-splitpane'
+
+export default {
+  components: { splitPane },
+  methods: {
+    resize() {
+      console.log('resize')
+    }
+  }
+}
+</script>
+
+<style  scoped>
+	.components-container {
+		position: relative;
+		height: 100vh;
+	}
+
+	.left-container {
+		background-color: #F38181;
+		height: 100%;
+	}
+
+	.right-container {
+		background-color: #FCE38A;
+		height: 200px;
+	}
+
+	.top-container {
+		background-color: #FCE38A;
+		width: 100%;
+		height: 100%;
+	}
+
+	.bottom-container {
+		width: 100%;
+		background-color: #95E1D3;
+		height: 100%;
+	}
+</style>