Skip to content

Commit 6e728dc

Browse files
author
yinquan
committed
3.7.0 add the fnCustomClasses property
1 parent 91aae9d commit 6e728dc

13 files changed

+142
-18
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
3.7.0
2+
- added:
3+
- the fnCustomClasses property
4+
15
3.6.0
26
- fixed:
37
- the input box's width didn't fit its content well.

‎CHANGELOG.zh.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
3.7.0
2+
- 添加:
3+
- 属性 fnCustomClasses
4+
15
3.6.0
26
- 修正:
37
- 编辑一个结点的标题时，输入框的宽度不能很好地适应内容的长度。

‎docs/css/app.571cd6dc.css‎ renamed to ‎docs/css/app.8cea11bb.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.571cd6dc.css" rel="preload" as="style"><link href="js/app.291f2d3f.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.571cd6dc.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.291f2d3f.js"></script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.8cea11bb.css" rel="preload" as="style"><link href="js/app.52c6bc78.js" rel="preload" as="script"><link href="js/chunk-vendors.c3eedee7.js" rel="preload" as="script"><link href="css/app.8cea11bb.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c3eedee7.js"></script><script src="js/app.52c6bc78.js"></script></body></html>

‎docs/js/app.291f2d3f.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/js/app.291f2d3f.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/app.52c6bc78.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/app.52c6bc78.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/router/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import CustomAppearanceStripesExample from '../views/CustomAppearanceStripesExam
4242
import CustomAppearanceDisableAnimationsExample from '../views/CustomAppearanceDisableAnimationsExample.vue'
4343
import CustomAppearanceExtraContentExample from '../views/CustomAppearanceExtraContentExample.vue'
4444
import CustomAppearanceLimitTitleWidthExample from '../views/CustomAppearanceLimitTitleWidthExample.vue'
45+
import CustomAppearanceCustomClassesExample from '../views/CustomAppearanceCustomClassesExample.vue'
4546

4647
Vue.use(VueRouter)
4748

@@ -244,6 +245,11 @@ const routes = [
244245
path: '/:lang/example/custom-appearance/limit-title-width',
245246
name: 'custom-appearance-limit-title-width-example',
246247
component: CustomAppearanceLimitTitleWidthExample
248+
},
249+
{
250+
path: '/:lang/example/custom-appearance/custom-classes',
251+
name: 'custom-appearance-custom-classes-example',
252+
component: CustomAppearanceCustomClassesExample
247253
}
248254
]
249255

‎example/views/CustomAppearanceCustomClassesExample.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="example-wrapper">
3+
<div class="panel">
4+
<TWTree
5+
:tree="tree"
6+
:fnCustomClasses="fnCustomClasses"
7+
class="tree" />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import TWTree from '../../src/TWTree.vue'
14+
15+
export default {
16+
name: 'custom-appearance-custom-classes-example',
17+
components: {
18+
TWTree
19+
},
20+
data() {
21+
return {
22+
tree: [
23+
{
24+
id: 1,
25+
title: 'ROOT',
26+
hasChild: true,
27+
children: [
28+
{
29+
id: 2,
30+
title: 'child 1',
31+
},
32+
{
33+
id: 3,
34+
title: 'child 2',
35+
hasChild: true,
36+
children: [
37+
{
38+
id: 4,
39+
title: 'child 2-1',
40+
type: 'red'
41+
},
42+
{
43+
id: 5,
44+
title: 'child 2-2',
45+
type: 'blue'
46+
},
47+
{
48+
id: 6,
49+
title: 'child 2-3',
50+
type: 'brown'
51+
}
52+
],
53+
},
54+
{
55+
id: 7,
56+
title: 'child 3',
57+
},
58+
{
59+
id: 8,
60+
title: 'child 4',
61+
}
62+
]
63+
}
64+
]
65+
}
66+
},
67+
methods: {
68+
fnCustomClasses(node) {
69+
if (node.type !== undefined) {
70+
return ['twtree-node-' + node.type]
71+
}
72+
}
73+
}
74+
}
75+
</script>
76+
77+
<style scoped>
78+
.panel .tree {
79+
width: 50%;
80+
}
81+
.panel .tree >>> .twtree-node-red {
82+
color: red;
83+
}
84+
.panel .tree >>> .twtree-node-blue {
85+
color: blue;
86+
}
87+
.panel .tree >>> .twtree-node-brown {
88+
color: brown;
89+
}
90+
</style>

0 commit comments

Comments
 (0)