# partition-drag

**Repository Path**: gljy/partition-drag

## Basic Information

- **Project Name**: partition-drag
- **Description**: vue3组件 分区拖拽组件,需要三个组件进行配合
支持左右拖动, 上下拖动,并且可以多个区域互相拖动,拖动不影响相邻的分区
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-28
- **Last Updated**: 2023-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 分区拖拽组件,需要三个组件进行配合  

npm install partition-drag  

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

****

```
// 源码地址: 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>
```
****
以下是图片
![Alt text](image-1.png)