分区拖拽组件支持vue2和vue3

需要三个组件进行配合

第一次发博客,希望能帮到大家

.支持左右拖动, 上下拖动,并且可以多个区域互相拖动,拖动不影响相邻的分区
.最外层组件 partition-drag
.子组件分割拖动线组件 partition-drag-line
.子组件分区组件 partition-drag-block

npm安装:npm install partition-drag

vue2安装:npm install partition-drag-vue2

// 源码地址: https://gitee.com/gljy/partition-drag
import partitionDrag from 'partition-drag';  
const app = createApp(App);  
app.use(partitionDrag);  

import 'partition-drag/style.css' // 引入样式  

<partition-drag style="width: 100%;height: 100%;" flexDirection="row">
    <!-- 根据 flexDirection:row 横向排列 column竖向排列 确定 -->
    <!-- keyId必须要有,并且必须唯一 originalFlex的值加起来必须等于100 -->
    <!-- :minValue="200" :maxValue="500"限制最大宽度和最小宽度 单位 px -->
    <partition-drag-block :minValue="200" :maxValue="500" :originalFlex="20" keyId="one1">
    左侧1
    </partition-drag-block>
    <!-- partition-drag-line 属性 
        clickClose(点击关闭左侧或右侧div):默认为true  可选值 true | false false表示去掉此功能
        closeDirection(关闭左侧还是右侧div): 默认为left 可选值 left | right -->
    <partition-drag-line keyId="two2"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three3">
    右侧--2
    </partition-drag-block>
    <partition-drag-line keyId="two4"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three5">
    右侧-----3
    </partition-drag-block>
    <partition-drag-line keyId="two5"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three6">
    右侧-----4
    </partition-drag-block>
    <partition-drag-line keyId="two7"></partition-drag-line>
    <partition-drag-block :originalFlex="20" keyId="three8">
    右侧-----5
    </partition-drag-block>
</partition-drag>

以下是效果图,可能文字描述不是很方便了解具体功能, 主要用在页面左右功能分区和上下功能分区的时候。内容区显示不全的时候，可以拖动两个div中间的线条，改变div的大小，从而可以更全面的显示页面数据

源码位置:https://gitee.com/gljy/partition-drag