V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shuirong1997
V2EX  ›  分享发现

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

  •  
  •   shuirong1997 · 2017-07-01 23:16:47 +08:00 · 4025 次点击
    这是一个创建于 2701 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    预览:

    vue-drag-tree.gif

    特性:

    • 所有树节点都可拖拽进行位置的交换
    • 双击节点可转换成 folder

    接口


    属性

    | 属性名 | 描述 | 类型 | 默认值 | | :---------------- | :--------------- | :------ | :------- | | 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: 当前节点所在的树组件 |

    1 条回复    2017-07-04 08:30:55 +08:00
    Mark24
        1
    Mark24  
       2017-07-04 08:30:55 +08:00
    一楼,点赞
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2827 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:19 · PVG 15:19 · LAX 23:19 · JFK 02:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.