vikingowl/vue3-tree-list
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: support closing operation icons

Browse Source
This commit is contained in:
youxingzhi
2019-02-23 11:52:58 +08:00
parent a3b03a9579
commit 8f0a5d7737
4 changed files with 198 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
dev/App.vue
View File

@@ -3,9 +3,9 @@
<button @click="addNode">Add Node</button> <button @click="addNode">Add Node</button>
<vue-tree-list <vue-tree-list
@click="onClick" @click="onClick"
@change-name="onChange" @change-name="onChangeName"
@delete-node="onDel" @delete-node="onDel"
@add-node="onChange" @add-node="onAddNode"
:model="data" :model="data"
default-tree-node-name="new node" default-tree-node-name="new node"
default-leaf-node-name="new leaf" default-leaf-node-name="new leaf"
@@ -36,6 +36,10 @@
id: 1, id: 1,
pid: 0, pid: 0,
dragDisabled: true, dragDisabled: true,
addTreeNodeDisabled: true,
addLeafNodeDisabled: true,
editNodeDisabled: true,
delNodeDisabled: true,
children: [ children: [
{ {
name: 'Node 1-2', name: 'Node 1-2',
@@ -60,12 +64,21 @@
} }
}, },
methods: { methods: {
onDel (node) { onDel (params) {
console.log(params)
node.remove() node.remove()
}, },
onChange (data) { onChangeName (params) {
console.log(data) console.log(params)
},
onAddNode (params) {
console.log(params)
},
onClick (params) {
console.log(params)
}, },
addNode () { addNode () {

2
dev/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="with=device-width,initial-scale=1.0, <meta name="viewport" content="with=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no"> maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
<title>vue-date-range</title> <title>vue-tree-list</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

297
readme.md
View File

@@ -9,142 +9,195 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
``npm install vue-tree-list`` ``npm install vue-tree-list``
```javascript ```javascript
<div> <template>
<button @click="addNode">Add Node</button> <div>
<vue-tree-list <button @click="addNode">Add Node</button>
@click="onClick" <vue-tree-list
@change-name="onChange" @click="onClick"
@delete-node="onChange" @change-name="onChangeName"
@add-node="onChange" @delete-node="onDel"
:model="data" @add-node="onAddNode"
default-tree-node-name="new node" :model="data"
default-leaf-node-name="new leaf" default-tree-node-name="new node"
v-bind:default-expanded="false"> default-leaf-node-name="new leaf"
</vue-tree-list> v-bind:default-expanded="false">
<button @click="getNewTree">Get new tree</button> <span class="icon" slot="addTreeNode">addTreeNode</span>
<pre> <span class="icon" slot="addLeafNode">addLeafNode</span>
{{newTree}} <span class="icon" slot="editNode">editNode</span>
</pre> <span class="icon" slot="delNode">delNode</span>
</div> </vue-tree-list>
... <button @click="getNewTree">Get new tree</button>
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list' <pre>
export default { {{newTree}}
components: { </pre>
VueTreeList </div>
}, </template>
data () { <script>
return { import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
newTree: {}, export default {
data: new Tree([ components: {
{ VueTreeList
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
name: 'Node 2',
id: 3,
pid: 0,
disabled: true
},
{
name: 'Node 3',
id: 4,
pid: 0
}
])
}
},
methods: {
onChange (data) {
console.log(data)
}, },
data () {
addNode () { return {
var node = new TreeNode({ name: 'new node', isLeaf: false }) newTree: {},
if (!this.data.children) this.data.children = [] data: new Tree([
this.data.addChildren(node) {
}, name: 'Node 1',
id: 1,
getNewTree () { pid: 0,
var vm = this dragDisabled: true,
function _dfs (oldNode) { addTreeNodeDisabled: true,
var newNode = {} addLeafNodeDisabled: true,
editNodeDisabled: true,
for (var k in oldNode) { delNodeDisabled: true,
if (k !== 'children' && k !== 'parent') { children: [
newNode[k] = oldNode[k] {
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
name: 'Node 2',
id: 3,
pid: 0,
disabled: true
},
{
name: 'Node 3',
id: 4,
pid: 0
} }
} ])
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (var i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
return newNode
} }
vm.newTree = _dfs(vm.data)
}, },
methods: {
onDel (node) {
console.log(node)
node.remove()
},
onClick(model) { onChangeName (params) {
console.log(model) console.log(params)
},
onAddNode (params) {
console.log(params)
},
onClick (params) {
console.log(params)
},
addNode () {
var node = new TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree () {
var vm = this
function _dfs (oldNode) {
var newNode = {}
for (var k in oldNode) {
if (k !== 'children' && k !== 'parent') {
newNode[k] = oldNode[k]
}
}
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (var i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
return newNode
}
vm.newTree = _dfs(vm.data)
},
onClick(model) {
console.log(model)
}
} }
} }
} </script>
<style lang="less" rel="stylesheet/less">
.vtl {
.vtl-drag-disabled {
background-color: #d0cfcf;
&:hover {
background-color: #d0cfcf;
}
}
.vtl-disabled {
background-color: #d0cfcf;
}
}
</style>
<style lang="less" rel="stylesheet/less" scoped>
.icon {
&:hover {
cursor: pointer;
}
}
</style>
``` ```
# props # props
**default-tree-node-name** ## props of vue-tree-list
| name | type | default | description |
|:-----:|:-------:|:------------:|:----:|
model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type
default-tree-node-name | string | New node node | Default name for new treenode
default-leaf-node-name | string | New leaf node | Default name for new leafnode
default-expanded | boolean | true | Tree is expanded or not
Default name for new treenode.
**default-leaf-node-name** ## props of TreeNode
### attributes
Default name for new leafnode. | name | type | default | description |
|:-----:|:-------:|:------------:|:----:|
**default-expanded** id | string, number | current timestamp | The node's id
isLeaf | boolean | false | The node is leaf or not
Default node is expanded or not. dragDisabled | boolean | false | Forbid dragging tree node
addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not
addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not
editNodeDisabled | boolean | false | Show `editNode` button or not
delNodeDisabled | boolean | false | Show `delNode` button or not
children | array | null | The children of node
### methods
| name | params | description |
|:-----:|:-------:|:----:|
changeName | name | Change node's name
addChildren | children: object, array | Add children to node
remove | - | Remove node from the tree
moveInto | target: TreeNode | Move node into another node
insertBefore | target: TreeNode | Move node before another node
insertAfter | target: TreeNode | Move node after another node
# events # events
**click** | name | params | description |
|:-----:|:-------:|:------------:|:----:|
click | TreeNode | Trigger when clicking a tree node
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.
add-node | TreeNode | Trigger after adding a new node
**change-name** # customize operation icons
The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
**delete-node**
```javascript
@delete-node="onDel"
...
onDel (node) {
node.remove()
},
```
**add-node**
# Forbid dragging
Use `dragDisabled` to forbid dragging:
```javascript
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
...
```
```html
<span class="icon" slot="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
```

8
src/VueTreeList.vue
View File

@@ -37,22 +37,22 @@
</div> </div>
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable"> <input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
<div class="vtl-operation" v-show="isHover"> <div class="vtl-operation" v-show="isHover">
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf"> <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
<slot name="addTreeNode"> <slot name="addTreeNode">
<i class="vtl-icon vtl-icon-folder-plus-e"></i> <i class="vtl-icon vtl-icon-folder-plus-e"></i>
</slot> </slot>
</span> </span>
<span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf"> <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
<slot name="addLeafNode"> <slot name="addLeafNode">
<i class="vtl-icon vtl-icon-plus"></i> <i class="vtl-icon vtl-icon-plus"></i>
</slot> </slot>
</span> </span>
<span title="edit" @click.stop.prevent="setEditable"> <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
<slot name="editNode"> <slot name="editNode">
<i class="vtl-icon vtl-icon-edit"></i> <i class="vtl-icon vtl-icon-edit"></i>
</slot> </slot>
</span> </span>
<span title="delete" @click.stop.prevent="delNode"> <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
<slot name="delNode"> <slot name="delNode">
<i class="vtl-icon vtl-icon-trash"></i> <i class="vtl-icon vtl-icon-trash"></i>
</slot> </slot>