Github: Demo:
和v1.0.0比起来,差别还是挺大的.(至少能让别人看得下去了)
预览:
特性:
- 双击节点添加一个字节点
- 对节点进行任意拖拽
- 控制特定节点是否可拖、是否可放置其他节点
- 增加/删除 任意层级的节点（#待添加）
接口
属性
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 节点树的数据 | Array | －－ |
| defaultText | 新生成的节点的文本(name属性) | String | 新增节点 |
| allowDrag | 判断哪些节点可以被拖拽（return true表示允许） | Function | ()=>true |
| allowDrop | 判断哪些节点可以被塞入其他节点（return true表示允许） | Function | ()=>true |
方法
| 方法名 | 描述 | 参数 |
|---|---|---|
| current-clicked | 告诉你哪个节点被点击了，这个节点所在的组件是哪个 | (model,component) model: 当前被点击节点的数据． component: 当前节点所在的树组件 |
| drag | 节点被拖动时触发的 drag 事件 | (model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件 |
| drag-enter | 当被拖动节点进入有效的放置目标时， dragenter 事件被触发 | (model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件 |
| drag-leave | 当被拖动节点离开有效的放置目标时， dragleave 事件被触发 | (model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件 |
| drag-over | 当节点被拖拽到一个有效的放置目标上时，触发 dragover 事件 | (model,component,e) model: 有效放置目标节点的数据; component: 有效放置目标节点所在的树组件（VNode）; e: 拖拽事件 |
| drag-end | 拖放事件在拖放操作结束时触发 | (model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件 |
| drop | 当节点被放置到一个有效的防止目标上时，drop被触发 | (model,component,e) model: 当前被拖动节点的数据; component: 当前被拖动节点所在的树组件（VNode）; e: 拖拽事件 |
License
MIT