refactor: change event name

This commit is contained in:
youxingzhi
2019-02-15 09:41:53 +08:00
parent a8284583da
commit cde7836539
3 changed files with 42 additions and 23 deletions

View File

@@ -3,6 +3,9 @@
<button @click="addNode">Add Node</button>
<vue-tree-list
@click="onClick"
@change-name="onChange"
@delete-node="onChange"
@add-node="onChange"
:model="data"
default-tree-node-name="new node"
default-leaf-node-name="new leaf"
@@ -53,13 +56,17 @@
}
},
methods: {
addNode: function () {
onChange (data) {
console.log(data)
},
addNode () {
var node = new TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
getNewTree () {
var vm = this
function _dfs (oldNode) {
var newNode = {}

View File

@@ -9,14 +9,25 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
``npm install vue-tree-list``
```javascript
<button @click="addNode">Add Node</button>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
<div>
<button @click="addNode">Add Node</button>
<vue-tree-list
@click="onClick"
@change-name="onChange"
@delete-node="onChange"
@add-node="onChange"
:model="data"
default-tree-node-name="new node"
default-leaf-node-name="new leaf"
v-bind:default-expanded="false">
</vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
{{newTree}}
</pre>
</pre>
</div>
...
import { VueTreeList, Tree, TreeNode } from '../src'
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
export default {
components: {
VueTreeList
@@ -43,7 +54,7 @@ export default {
name: 'Node 2',
id: 3,
pid: 0,
dragDisabled: true
disabled: true
},
{
name: 'Node 3',
@@ -54,13 +65,17 @@ export default {
}
},
methods: {
addNode: function () {
onChange (data) {
console.log(data)
},
addNode () {
var node = new TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
getNewTree () {
var vm = this
function _dfs (oldNode) {
var newNode = {}
@@ -93,7 +108,7 @@ export default {
# props
**default-tree-node-name**
Default name for new treenode.
Default name for new treenode.
**default-leaf-node-name**
@@ -118,14 +133,11 @@ Default node is expanded or not.
# events
**click**
```javascript
<vue-tree-list @click="onClick" ...
...
onClick(model) {
console.log(model)
}
...
```
**change-name**
**delete-node**
**add-node**
# Forbid dragging
Use `dragDisabled` to forbid dragging:

View File

@@ -216,7 +216,7 @@
var node = new TreeNode({ name, isLeaf })
this.model.addChildren(node, true)
var root = this.getRootNode();
root.$emit('new-node', node)
root.$emit('add-node', node)
},
dragStart(e) {