当前位置: 首页 > Web前端 > HTML5

我已经完善了“拖放”树组件(Vue2.x)

时间:2023-04-05 13:47:48 HTML5

Github:https://github.com/shuiRong/v...Demo:https://vigilant-curran-d6fec...和v1.0.0相比,差别还是挺大的。(至少别人能看下去)预览:特点:双击节点添加字节点,任意拖动节点,控制是否可以拖动特定节点,是否可以放置其他节点添加/删除任意级别的节点(#待添加)接口属性属性名称描述类型默认值为节点树的data数组——defaultText新生成节点的文本(name属性)String新添加的节点allowDrag判断哪个节点可以拖动(返回true表示允许)Function()=>trueallowDrop判断哪些节点可以拖动插入其他节点(返回true表示允许)Function()=>true方法方法名描述参数current-clicked告诉你是哪个节点被点击以及这个节点在哪个组件中(model,component)model:当前点击节点的数据。component:拖动当前节点所在树组件的拖动节点时触发的拖动事件(model,component,e)model:当前被拖动节点的数据;component:当前拖动节点所在的树组件(VNode);e:drageventdrag-enter当被拖动节点进入一个有效的droptarget时,触发dragenter事件(model,component,e)model:有效droptarget节点的数据;component:有效放置目标节点所在的树组件(VNode);e:拖动事件drag-leave当被拖动节点离开有效放置目标时,触发dragleave事件(model,component,e)model:有效放置目标节点的数据;component:有效droptargetnode所在的树组件(VNode);e:drageventdrag-over当节点被拖动到一个有效的放置目标时,会触发dragover事件(model,component,e)model:有效放置目标节点的数据;component:有效放置目标节点的树组件(VNode);e:drageventdrag-end拖放操作结束时触发拖放事件(model,component,e)model:当前拖动节点的数据;component:当前拖动节点所在的树组件(VNode);e:拖动事件drop当节点被放置在一个有效的预防目标上时,触发drop(model,component,e)model:当前拖动节点的数据;component:当前拖动节点所在的树组件(VNode);e:拖动事件LicenseMIT

猜你喜欢