说明
基于vue-grid-layout封装的拖拽面板官网 (opens new window)
参数说明
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| components | 卡片组件列表， | Object | — | - |
| type | 类型，用于区分模型和单独页面 | String | pages/model | pages |
| rowHeight | 每行的高度，单位像素。 | Number | — | 56 |
| margin | 定义栅格中的元素边距。值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。 | Array | — | [16,16] |
| responsive | 标识布局是否为响应式。 | Boolean | — | false |
| verticalCompact | 标识布局是否垂直压缩。 | Boolean | — | true |
| loading | 加载动画 | Boolean | — | false |
| list | 这是栅格的初始布局。详情说明请点击上方vue-grid-layout 官网参考layout属性 | Array | — | — |
| isDrag | 标识栅格中的元素是否在进行拖拽。用于阻止事件穿透，开始进行拖拽时必须设置`` |Boolean| — |false` | | | |
| emptyInfo | 面板为空时显示的内容,包含url图片地址以及desc描述文字 | Object | — | — |
事件
| 事件名称 | 说明 | 回调参数 |
|---|
| dragenter | 被拖拽对象进入过程对象时被触发 | e |
| dragover | 被拖拽对象在过程对象内移动时触发 | e |
| dragleave | 被拖拽对象离开目标对象时触发 | e |
| drop | 源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发 | e |
| operateChange | 卡片设置操作操作，返回操作类型和当前操作的卡片数据 | type, item |