draglayout

基于flex的可拖拽控制布局，类表格

Build Setup

npm install vue-drag-flex

main.js
import DragLayout from 'vue-drag-flex'
Vue.use(DragLayout)


# build for production with minification
npm run build

npm下载

npm install vue-drag-flex

main.js

import DragLayout from 'vue-drag-flex'
Vue.use(DragLayout)

template

<drag-layout mode="row" dl-height="200px" >
    <drag-layout-item dl-height="100%" dl-width="300px" :min-height="50">
    </drag-layout-item>
</drag-layou>

文档

drag-layout

| 属性 | 可选值 | 类型 | 说明 | | ---- | ---- | ---- | ---- | | mode | column、row | String | 分别为纵向布局与横向布局 | | dl-height | -- | String | 容器高度 | | dl-width | -- | String | 容易宽度 |

drag-layout-item

| 属性 | 可选值 | 类型 | 说明 | | ---- | ---- | ---- | ---- | | dl-width | -- | String | 初始宽度 | | dl-height | -- | String | 初始高度 | | min-width | -- | Number | 最小宽度，建议最小设为50；此单位为px | | min-height | -- | Number | 最小高度，建议最小设为50；此单位为px |

slot

| 名称 | 描述 | | ---- | ---- | | slider | 可通过插槽自定义slider样式，如不设置，则使用默认样式 |

drag-layout-item与drag-layout可互相嵌套，形成类似表格的布局

问题记录

| 描述 | 现象 | 是否解决 | | ---- | ---- | ---- | | layout-item的初始宽高设置为非确切数值（px以外的，如%,vh,vw）。 | 会导致只能缩小拖动，不能变大拖动 | 未解决 |