<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src='https://unpkg.com/vue@2.2.6'></script>
<script src="../lib/vue-split-drag-pane.umd.min.js"></script>
</head>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<body>
<div id="app" style="width:100%;height: 100%;">
<split-drag-pane @change="change">
<split-drag-pane default-percent="30" vmid="1" @change="change">
<div style="width: 100%;height: 100%;background-color: aqua;">
1
</div>
</split-drag-pane>
<split-drag-pane default-percent="40" vmid="2" @change="change">
<div style="width: 100%;height: 100%;background-color: bisque;">
2
</div>
</split-drag-pane>
<split-drag-pane default-percent="30" vmid="3" split="horizontal" @change="change">
<split-drag-pane default-percent="30" vmid="3-1" @change="change">
<div style="width: 100%;height: 100%;background-color: #07a1f3;">
3-1
</div>
</split-drag-pane>
<split-drag-pane default-percent="40" vmid="3-2" @change="change">
<div style="width: 100%;height: 100%;background-color: #9cf3a9;">
3-2
</div>
</split-drag-pane>
<split-drag-pane default-percent="30" vmid="3-3" @change="change">
<div style="width: 100%;height: 100%;background-color: #f3e0a7;">
3-3
</div>
</split-drag-pane>
</split-drag-pane>
</split-drag-pane>
</div>
<script>
var Main = {
name: 'test',
methods: {
change:function(val,vmid) {
console.log("val,vmid",val,vmid
)
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>
