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

2017-07-01 23:16:47 +08:00
 shuirong1997

Github: https://github.com/shuiRong/vue-drag-tree

Demo: https://planner-whips-77215.netlify.com/vuedragtree

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

接受了一位老哥的建议(也考虑到实际需求),把拖拽交换换成了拖拽插入.

预览:

特性:

接口


属性

| 属性名 | 描述 | 类型 | 默认值 | | :---------------- | :--------------- | :------ | :------- | | model | 树的数据 | object | -- | | current-highlight | 是否高亮显示被点击的节点 | boolean | false | | default-text | 新生成的节点的文本 | String | New Node | | hover-color | 鼠标飘过节点时,节点显示的背景色 | String | #E5E9F2 | | highlight-color | 节点高亮时显示的背景色 | String | #99A9BF |

方法

| 方法名 | 描述 | 参数 | | -------------- | ---------------------------------------- | ---------------------------------------- | | assignData | 里面有节点已经交换过的树数据,你只需要把它赋值给之前的 data 就好.这个方法主要是考虑到有些人在项目中用到了 vuex 或者其他类似的工具. | (data) data: 树数据( object 类型) | | curNodeClicked | 告诉你哪个节点被点击了,这个节点所在的组件是哪个 | (model,component) model: 当前被点击节点的数据. component: 当前节点所在的树组件 |

3981 次点击
所在节点    分享发现
1 条回复
Mark24
2017-07-04 08:30:55 +08:00
一楼,点赞

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/372408

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX