mirror of
https://github.com/weibangtuo/vue-tree.git
synced 2025-12-08 19:46:25 +00:00
First commit
This commit is contained in:
weibangtuo
parent
c84d5603d7
commit
3fb6c43e19
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
|||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2016 weibt
|
Copyright (c) 2016 weibangtuo
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
69
README.md
Normal file
69
README.md
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
# Vue Tree View Component
|
||||||
|
|
||||||
|
Support `Vue.js` 1.0+
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Add the following required resources.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="[You Path]font-awesome/4.+/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="src/tree.vue.css">
|
||||||
|
|
||||||
|
<script src="[You Path]vue.js"></script>
|
||||||
|
<script src="src/tree.vue.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
Add the component in your vue view.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app">
|
||||||
|
<vue-tree :option="option"></vue-tree>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
option: {
|
||||||
|
root: { //Root Node, see Node Options
|
||||||
|
name: 'Root Node',
|
||||||
|
isParent: true,
|
||||||
|
isOpen: true,
|
||||||
|
children: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Node Options
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
name: 'Node Name',
|
||||||
|
title: 'Node Tag title attr',
|
||||||
|
isParent: true, //
|
||||||
|
isOpen: true, // Control node to fold or unfold
|
||||||
|
icon: 'fa fa-folder', // Or other custom icons call by class name
|
||||||
|
openedIcon: 'fa fa-folder-open', // [option] For parent. Show when isOpen == true, show icon if it's null or empty
|
||||||
|
closedIcon: 'fa fa-folder', // [option] For parent. Show when isOpen != true, show icon if it's null or empty
|
||||||
|
children: [], // for parent node only
|
||||||
|
buttons: [ // []
|
||||||
|
{
|
||||||
|
title: 'icon button tag title attr', //[option]
|
||||||
|
icon: 'fa fa-edit',
|
||||||
|
click: function (node) { //[option]
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Copyright (c) 2016 weibangtuo. Under MIT License.
|
||||||
19
demo/demo-vue1.html
Normal file
19
demo/demo-vue1.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Vue Tree</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="../src/tree.vue.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="demo">
|
||||||
|
<h1>{{title}}</h1>
|
||||||
|
<vue-tree :option="option"></vue-tree>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
|
||||||
|
<script src="../src/tree.vue.js"></script>
|
||||||
|
<script src="demo.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
demo/demo-vue2.html
Normal file
19
demo/demo-vue2.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Vue Tree</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="../src/tree.vue.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="demo">
|
||||||
|
<h1>{{title}}</h1>
|
||||||
|
<vue-tree :option="option"></vue-tree>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
|
||||||
|
<script src="../src/tree.vue.js"></script>
|
||||||
|
<script src="demo.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
125
demo/demo.js
Normal file
125
demo/demo.js
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
var addNode = function (node) {
|
||||||
|
node.isOpen = true;
|
||||||
|
node.children.push({
|
||||||
|
name: 'child node',
|
||||||
|
parent: node,
|
||||||
|
isOpen: true,
|
||||||
|
isParent: true,
|
||||||
|
children: [],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Add',
|
||||||
|
icon: 'fa fa-plus',
|
||||||
|
click: addNode
|
||||||
|
}, {
|
||||||
|
title: 'Delete',
|
||||||
|
icon: 'fa fa-trash',
|
||||||
|
click: function (node) {
|
||||||
|
node.parent && node.parent.children.$remove(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
};
|
||||||
|
new Vue({
|
||||||
|
el: '#demo',
|
||||||
|
data: {
|
||||||
|
title: 'Vue Tree Demo',
|
||||||
|
option: {
|
||||||
|
root: {
|
||||||
|
name: 'Root Node',
|
||||||
|
isParent: true,
|
||||||
|
isOpen: true,
|
||||||
|
openedIcon: 'fa fa-folder-open-o',
|
||||||
|
closedIcon: 'fa fa-folder-o',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'Level1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Level1 with icon',
|
||||||
|
icon: 'fa fa-cube',
|
||||||
|
title: '192.168.89.0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Edit node',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Edit',
|
||||||
|
icon: 'fa fa-edit',
|
||||||
|
click: function (node) {
|
||||||
|
node.name = prompt('Editing node name, require string', node.name) || node.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Level1 has children',
|
||||||
|
icon: 'fa fa-folder',
|
||||||
|
openedIcon: 'fa fa-folder-open',
|
||||||
|
isOpen: false,
|
||||||
|
isParent: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'level2 - 1',
|
||||||
|
icon: 'fa fa-file'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'level2 - 2',
|
||||||
|
icon: 'fa fa-file'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'level2 - 3',
|
||||||
|
icon: 'fa fa-file'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Level1 add node',
|
||||||
|
isOpen: true,
|
||||||
|
isParent: true,
|
||||||
|
children: [],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Add',
|
||||||
|
icon: 'fa fa-plus',
|
||||||
|
click: function (node) {
|
||||||
|
node.isOpen = true;
|
||||||
|
node.children.push({
|
||||||
|
name: 'level2 node',
|
||||||
|
parent: node,
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Delete',
|
||||||
|
icon: 'fa fa-trash',
|
||||||
|
click: function (node) {
|
||||||
|
node.parent.children.$remove(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'level1-addNode',
|
||||||
|
isOpen: true,
|
||||||
|
isParent: true,
|
||||||
|
children: [],
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
title: 'Add',
|
||||||
|
icon: 'fa fa-plus',
|
||||||
|
click: addNode
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
78
src/tree.vue.css
Normal file
78
src/tree.vue.css
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
.vue-tree {
|
||||||
|
font-size: 14px;
|
||||||
|
min-height: 20px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li > span,
|
||||||
|
.vue-tree li > i,
|
||||||
|
.vue-tree li > a {
|
||||||
|
line-height: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li > a + a {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li i.icon-open-state {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree ul ul li:hover {
|
||||||
|
background: rgba(0, 0, 0, .015)
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li:after, .vue-tree li:before {
|
||||||
|
content: '';
|
||||||
|
left: -18px;
|
||||||
|
position: absolute;
|
||||||
|
right: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li:before {
|
||||||
|
border-left: 1px solid #999;
|
||||||
|
bottom: 50px;
|
||||||
|
height: 100%;
|
||||||
|
top: -16px;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li:after {
|
||||||
|
border-top: 1px solid #999;
|
||||||
|
height: 20px;
|
||||||
|
top: 17px;
|
||||||
|
width: 22px
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree > ul > li::after, .vue-tree > ul > li:before {
|
||||||
|
border: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree li:last-child::before {
|
||||||
|
height: 34px
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree > ul {
|
||||||
|
padding-left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-tree ul ul {
|
||||||
|
padding-left: 24px;
|
||||||
|
padding-top: 10px
|
||||||
|
}
|
||||||
55
src/tree.vue.js
Normal file
55
src/tree.vue.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
var VueTreeItem = Vue.extend({
|
||||||
|
template: '<li :class="{parent_li: node.isParent}">' +
|
||||||
|
'<i v-if="node.isParent" v-on:click="click(node)" class="fa icon-open-state" :class=\'{"fa-plus-square-o": !node.isOpen, "fa-minus-square-o": node.isOpen}\'></i>' +
|
||||||
|
'<span :title="node.title">' +
|
||||||
|
'<i v-if="showIcon(node)" :class="nodeClass(node)"></i> {{node.name}}</span>' +
|
||||||
|
'<a v-for="btn in node.buttons" class="ml5" href="javascript:" :title="btn.title" v-on:click="btnClick(btn, node)"><i :class="btn.icon"></i></a>' +
|
||||||
|
'<ul v-if="node.children && node.children.length" v-show="node.isOpen">' +
|
||||||
|
'<vue-tree-item v-for="item in node.children" :node="item"></vue-tree-item>' +
|
||||||
|
'</ul>' +
|
||||||
|
'</li>',
|
||||||
|
props: {
|
||||||
|
node: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showIcon: function (node) {
|
||||||
|
return node.icon || node.openedIcon || node.closedIcon;
|
||||||
|
},
|
||||||
|
nodeClass: function (node) {
|
||||||
|
if (node.isOpen) {
|
||||||
|
return node.openedIcon || node.icon;
|
||||||
|
} else {
|
||||||
|
return node.closedIcon || node.icon;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
click: function (node) {
|
||||||
|
node.isOpen = !node.isOpen;
|
||||||
|
},
|
||||||
|
btnClick: function (btn, node) {
|
||||||
|
if (typeof btn.click === 'function') {
|
||||||
|
btn.click(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
Vue.component('vue-tree-item', VueTreeItem);
|
||||||
|
|
||||||
|
var VueTree = Vue.extend({
|
||||||
|
template: '<div class="vue-tree"><ul>' +
|
||||||
|
'<tree-item :node.sync="option.root"></tree-item>' +
|
||||||
|
'</ul></div>',
|
||||||
|
props: {
|
||||||
|
option: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'tree-item': VueTreeItem
|
||||||
|
}
|
||||||
|
});
|
||||||
|
Vue.component('vue-tree', VueTree);
|
||||||
|
})();
|
||||||
Loading…
x
Reference in New Issue
Block a user