项目源码地址

 https://gitee.com/hl0109/vue-split-drag-pane

 一个可拖动调整面板布局大小的vue组件，支持vue2与vue3，支持PC与移动端操作

演示

 npm社区打不开时参考 https://gitee.com/hl0109/vue-split-drag-pane

安装

npm install vue-split-drag-pane -S

案例

<template>
    <div style="width:100vw;height: 100vh;">
        <split-drag-pane  @change="change" :span="10">
            <split-drag-pane default-percent="100px" vmid="1" @change="change">
                <div style="width: 100%;height: 100%;background-color: aqua;">
                    1
                </div>
            </split-drag-pane>
            <split-drag-pane  vmid="2" default-percent="calc(70% - 100px)" @change="change" :span="20">
                <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>
</template>
<script>
import {splitDragPane} from 'vue-split-drag-pane'
export default {
    components: {splitDragPane},
    methods: {
        change:function(val,vmid) {
            console.log("val,vmid",val,vmid
            )
        }
    }
}
</script>

说明

 1.属性(Attributes)

 2.事件(Events)