1.0.0
This commit is contained in:
12
.npmignore
Normal file
12
.npmignore
Normal 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
|
@@ -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
BIN
img/demo.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 995 KiB |
11
package.json
11
package.json
@@ -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"
|
||||
},
|
||||
|
89
readme.md
89
readme.md
@@ -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
|
||||

|
||||
|
||||
[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.
|
||||
|
Reference in New Issue
Block a user