美文网首页VueJSWeb前端之路让前端飞
我完善了下这个"支持拖拽"的树组件(Vue2

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

作者: 林水溶 | 来源:发表于2017-07-01 23:10 被阅读62次

    Github: https://github.com/shuiRong/vue-drag-tree
    Demo: https://planner-whips-77215.netlify.com/vuedragtree

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

    预览:

    特性:

    • 所有树节点都可拖拽进行位置的交换
    • 双击节点可转换成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: 当前节点所在的树组件

    相关文章

      网友评论

        本文标题:我完善了下这个"支持拖拽"的树组件(Vue2

        本文链接:https://www.haomeiwen.com/subject/hwngcxtx.html