Merge pull request #27 from iakta/feature/drop-events

Feature/drop events
This commit is contained in:
ayou
2019-03-15 22:49:45 +08:00
committed by GitHub
4 changed files with 13 additions and 2 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
{ {
"name": "vue-tree-list", "name": "vue-tree-list",
"version": "1.3.0", "version": "1.3.1",
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.", "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
"main": "dist/vue-tree-list.min.js", "main": "dist/vue-tree-list.min.js",
"scripts": { "scripts": {

View File

@@ -191,6 +191,8 @@ click | TreeNode | Trigger when clicking a tree node
change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node. delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
add-node | TreeNode | Trigger after adding a new node add-node | TreeNode | Trigger after adding a new node
drop | {'node', 'oldParent'} | Trigger after dropping a node into another
drop-up | {'node', 'oldParent'} | Trigger after extracting a node from another
# customize operation icons # customize operation icons
The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them: The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:

View File

@@ -244,8 +244,11 @@
}, },
drop(e) { drop(e) {
if (!fromComp) return if (!fromComp) return
const oldParent = fromComp.model.parent;
fromComp.model.moveInto(this.model) fromComp.model.moveInto(this.model)
this.isDragEnterNode = false this.isDragEnterNode = false
var node = this.getRootNode();
node.$emit('drop', {node: fromComp.model, oldParent: oldParent})
}, },
dragEnterUp () { dragEnterUp () {
@@ -262,8 +265,11 @@
}, },
dropUp () { dropUp () {
if (!fromComp) return if (!fromComp) return
const oldParent = fromComp.model.parent;
fromComp.model.insertBefore(this.model) fromComp.model.insertBefore(this.model)
this.isDragEnterUp = false this.isDragEnterUp = false
var node = this.getRootNode();
node.$emit('drop-up', {node: fromComp.model, oldParent: oldParent})
}, },
dragEnterBottom () { dragEnterBottom () {
@@ -280,8 +286,11 @@
}, },
dropBottom () { dropBottom () {
if (!fromComp) return if (!fromComp) return
const oldParent = fromComp.model.parent;
fromComp.model.insertAfter(this.model) fromComp.model.insertAfter(this.model)
this.isDragEnterBottom = false this.isDragEnterBottom = false
var node = this.getRootNode();
node.$emit('drop-bottom', {node: fromComp.model, oldParent: oldParent})
}, },
getRootNode() { getRootNode() {
var node = this.$parent var node = this.$parent