我完善了下这个"支持拖拽"的树组件(Vue2.x)

Github: https://github.com/shuiRong/v...
Demo: https://vigilant-curran-d6fec...

和v1.0.0比起来,差别还是挺大的.(至少能让别人看得下去了)

预览:
vue-drag-tree.gif

特性:

  • 双击节点添加一个字节点
  • 对节点进行任意拖拽
  • 控制特定节点是否可拖是否可放置其他节点
  • 增加/删除 任意层级的节点(#待添加)

接口


属性

属性名 描述 类型 默认值
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

阅读 7.9k

推荐阅读