This commit is contained in:
ayou
2017-07-23 10:35:20 +08:00
parent 43a707c497
commit 1c253ddec9
5 changed files with 117 additions and 10 deletions

12
.npmignore Normal file
View File

@@ -0,0 +1,12 @@
node_modules
npm-debug.log
.idea
coverage
examples
img
src
test
.babelrc
.travis.yml
karma.conf.js
webpack.config.js

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="with=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
<title>vue-tree</title>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">
<style>
html {
@@ -71,7 +72,13 @@
</h1>
</a>
<div class="container">
<vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
<button class="button is-primary is-small" @click="addNode">
<span class="icon is-small" style="margin-right: 2px;">
<i class="fa fa-plus-circle"></i>
</span>
New Treenode
</button>
<vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
</div>
<div class="container">
@@ -147,6 +154,12 @@
this.record = Object.assign({}, vuetree.Record)
},
addNode: function () {
var node = new vuetree.TreeNode('new node', false)
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
function _dfs (oldNode) {

BIN
img/demo.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 995 KiB

View File

@@ -11,21 +11,18 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/ParadeTo/vue-date-range.git"
"url": "git+https://github.com/ParadeTo/vue-tree.git"
},
"keywords": [
"vue",
"datepicker",
"date",
"range",
"moment"
"tree"
],
"author": "ayou",
"license": "ISC",
"bugs": {
"url": "https://github.com/ParadeTo/vue-date-range/issues"
"url": "https://github.com/ParadeTo/vue-tree/issues"
},
"homepage": "https://github.com/ParadeTo/vue-date-range#readme",
"homepage": "https://github.com/ParadeTo/vue-tree#readme",
"dependencies": {
"jquery": "^3.2.1"
},

View File

@@ -1,3 +1,88 @@
# vue-tree
A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
# TODO
add test
![vue-tree-demo.gif](https://github.com/ParadeTo/vue-tree/tree/master/img/demo.gif)
[Live Demo](http://paradeto.com/vue-tree/)
# use
``npm install vue-tree``
```javascript
<button @click="addNode">Add Node</button>
<vue-tree :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree>
<button @click="getNewTree">Get new tree</button>
<pre>
{{newTree}}
</pre>
...
import { VueTree, Tree, TreeNode } from 'vue-tree'
export default {
components: {
VueTree
},
data () {
return {
newTree: {},
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
name: 'Node 2',
id: 3,
pid: 0
},
{
name: 'Node 3',
id: 4,
pid: 0
}
])
}
},
methods: {
addNode: function () {
var node = new TreeNode('new node', false)
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
function _dfs (oldNode) {
let newNode = {}
newNode.name = oldNode.name
newNode.pid = oldNode.pid
newNode.isLeaf = oldNode.isLeaf
newNode.id = oldNode.id
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (let i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
return newNode
}
vm.newTree = _dfs(vm.data)
}
}
}
```
# props
default-tree-node-name: Default name for new treenode.
default-leaf-node-name: Default name for new leafnode.