1.0.9 • Published 9 months ago
partition-drag-vue2 v1.0.9
分区拖拽组件,需要三个组件进行配合
npm install partition-drag-vue2
.支持左右拖动, 上下拖动,并且可以多个区域互相拖动,拖动不影响相邻的分区
.最外层组件 partition-drag
.子组件分割拖动线组件 partition-drag-line
.子组件分区组件 partition-drag-block
// 源码地址: https://gitee.com/gljy/partition-drag-vue2
import partitionDrag from 'partition-drag-vue2.common.js';
Vue.use(customComponents)
import 'partition-drag-vue2/partition-drag-vue2.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>
以下是图片