1.0.4 • Published 3 years ago
vue-tree-drag v1.0.4
Tree
这是一个仿照element ui写的树拖拽组件,vue2
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 展示数据（如果想要自定义小图标，则在需要小图标的地方加入“TreeImg:‘ ’ ”，如果是静态图片必须是绝对路径，以’@/‘开头；） | Array | ||
| //draggable | //是否开启拖拽 | //Boolean | //false | |
| props | 配置选项,具体看下表 | Object | ||
| draggableColor | 拖拽时颜色展示(6位16进制) | String | 409EFF | |
| height | 每行高度 | String | 26px | |
| fontSize | 字体大小 | String | 14px | |
| icon | 树状左侧三角标的自定义图片(如果是静态图片必须是绝对路径，以’@/‘开头；) | String |
props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | String | label |
| children | 指定子节点 | String | children |
| id | 唯一参数，不可重复 | id |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| node-click | 节点被点击时的回调 | 共三个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| tree-drop | 拖拽结束时触发的事件 | 共六个参数，依次为：最后一个遇见的节点的data对应的对象、最后一个遇见节点对应的Node、最后一个节点的event、移动的节点的id、最后一个节点的id、在最后一个节点的before(上面)inner(里面)after(下面) |
| tree-start | 拖拽开始时触发的事件 | 共三个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| tree-over | 拖拽中的事件 | 共四个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身、目前在节点组件的before(上面)inner(里面)after(下面) |