摘要：和比起来差别还是挺大的至少能让别人看得下去了预览特性双击节点添加一个字节点对节点进行任意拖拽控制特定节点是否可拖是否可放置其他节点增加删除任意层级的节点待添加接口属性属性名描述类型默认值节点树的数据新生成的节点的文本属性新增节点判断哪些
Github: https://github.com/shuiRong/v...
Demo: https://vigilant-curran-d6fec...
和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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83765.html
摘要：和比起来差别还是挺大的至少能让别人看得下去了预览特性双击节点添加一个字节点对节点进行任意拖拽控制特定节点是否可拖是否可放置其他节点增加删除任意层级的节点待添加接口属性属性名描述类型默认值节点树的数据新生成的节点的文本属性新增节点判断哪些 Github: https://github.com/shuiRong/v...Demo: https://vigilant-curran-d6fec...
摘要：前端日报精选译，和的未来学习笔记箭头函数学习笔记教程栅格布局卷土重来，用还是为什么我会选择而不是众成翻译原生开发入门完全教程从零到壹全栈部落中文一个端带文件路径和颜色的攻城方略译使用提高应用程序的种方式中自定义操作符修仙 2017-07-02 前端日报 精选 [译] TC39，ECMAScript 和 JavaScript 的未来（Part 1）ES6学习笔记：箭头函数_ES6, Ja...
效果展示： 点击即可随意调节菜单宽度 变动后 页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。 我这里定义的分别是box、left、mid、resize(按钮类名) html 页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的） /*拖拽区div样式*/ .resize{ cursor:col-resize; positi...
阅读 3289·2021-10-11 10:58
阅读 2069·2021-10-08 10:05
阅读 1775·2021-09-27 13:34
阅读 3388·2019-08-30 15:53
阅读 2623·2019-08-30 14:02
阅读 3411·2019-08-29 16:55
阅读 526·2019-08-29 15:41
阅读 935·2019-08-29 15:23
