Skip to content

Commit a9b91a3

Browse files
Create-PeaceCreate-Peace
committed
feat: add docs
1 parent 7222c09 commit a9b91a3

File tree

17 files changed

+331
-23
lines changed

17 files changed

+331
-23
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/lib

‎examples/src/App.vue‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
<template>
22
<div id="app">
33
<div id="nav">
4-
<router-link to="/">home</router-link>
4+
<router-link to="/">base</router-link>
55
<span class="line">|</span>
6-
<router-link to="/fixed-size">fixed size</router-link>
6+
<router-link to="/check">check</router-link>
77
<span class="line">|</span>
8-
<router-link to="/dynamic-size">dynamic size</router-link>
8+
<router-link to="/checkStrictly">checkStrictly</router-link>
99
<span class="line">|</span>
10-
<router-link to="/horizontal">horizontal</router-link>
10+
<router-link to="/loadLazy">loadLazy</router-link>
1111
<span class="line">|</span>
12-
<router-link to="/infinite-loading">infinite loading</router-link>
12+
<router-link to="/custom">custom</router-link>
1313
<span class="line">|</span>
14-
<router-link to="/keep-state">keep state</router-link>
15-
<span class="line">|</span>
16-
<router-link to="/page-mode">page mode</router-link>
17-
<span class="line">|</span>
18-
<router-link to="/chat-room">chat room</router-link>
14+
<router-link to="/virtualTree">virtualTree</router-link>
1915
</div>
2016
<router-view />
2117

‎examples/src/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import VueTree from '../../lib'
44
import '../../lib/style/index.css'
55
import router from './router'
66

7-
Vue.use(VueTree)
7+
console.log(VueTree)
8+
9+
Vue.component(VueTree.name, VueTree)
810

911

1012
Vue.config.productionTip = false

‎examples/src/router/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import Vue from 'vue'
22
import VueRouter from 'vue-router'
33
import Base from '../views/base/index.vue'
4+
import Check from '../views/check/index.vue'
5+
import CheckStrictly from '../views/checkStrictly/index.vue'
6+
import LoadLazy from '../views/loadLazy/index.vue'
7+
import Custom from '../views/custom/index.vue'
8+
import VirtualTree from '../views/virtualTree/index.vue'
49

510

611
Vue.use(VueRouter)
@@ -10,6 +15,31 @@ const routes = [
1015
path: '/',
1116
name: 'home',
1217
component: Base
18+
},
19+
{
20+
path: '/check',
21+
name: 'check',
22+
component: Check
23+
},
24+
{
25+
path: '/checkStrictly',
26+
name: 'checkStrictly',
27+
component: CheckStrictly
28+
},
29+
{
30+
path: '/loadLazy',
31+
name: 'loadLazy',
32+
component: LoadLazy
33+
},
34+
{
35+
path: '/custom',
36+
name: 'custom',
37+
component: Custom
38+
},
39+
{
40+
path: '/virtualTree',
41+
name: 'virtualTree',
42+
component: VirtualTree
1343
}
1444
]
1545

‎examples/src/utils/mock.js‎

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

‎examples/src/views/check/index.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="test-tree">
3+
<input v-model="searchVal" placeholder="请输入过滤字段" />
4+
<VueTree
5+
ref="tree1"
6+
draggable
7+
showCheckbox
8+
:treeData="treeData"
9+
:searchVal="searchVal"
10+
@on-drop="dropNode"
11+
@on-checked-item="checkedItem"
12+
@on-selected-change="clickNode"
13+
@on-checked-change="clickCheckbox"
14+
/>
15+
</div>
16+
</template>
17+
<script>
18+
import { treeData } from '../../assets/treeData'
19+
export default {
20+
name: "Check",
21+
data() {
22+
return {
23+
treeData,
24+
searchVal: '',
25+
};
26+
},
27+
methods: {
28+
dropNode({ parentNode, targetNode, callback }) {
29+
console.log("dropNode", parentNode, targetNode);
30+
callback(targetNode);
31+
},
32+
checkedItem({ node, vNode }) {
33+
console.log("checkedItem", node, vNode);
34+
},
35+
clickNode(node) {
36+
console.log("clickNode", node);
37+
},
38+
clickCheckbox({ node, selectedData }) {
39+
console.log("clickCheckbox", node, selectedData);
40+
},
41+
},
42+
};
43+
</script>

‎examples/src/views/checkStrictly/index.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="test-tree">
3+
<!-- <div class="edit-container" style="border: 1px solid #ddd; border-radius: 3px ">
4+
<div ref="edit-box" contenteditable="true" style="padding: 4px; user-modify: read-only;">
5+
<Tag v-for="(item, index) in checkedValues"
6+
:key="item.key"
7+
contenteditable="false"
8+
type="success"
9+
@on-close="removeChecked(item, index)"
10+
:clearable="!item.disabled">{{item.name}}</Tag>
11+
</div>
12+
<Icon v-if="visibleClose" class="close-btn" @click="clearChecked" type="icon-close-bg" />
13+
</div> -->
14+
15+
<VueTree
16+
ref="tree3"
17+
draggable
18+
showCheckbox
19+
checkStrictly
20+
:treeData="treeData"
21+
@on-checked-change="handleCheckedChange" />
22+
</div>
23+
</template>
24+
<script>
25+
import { treeData } from '../../assets/treeData'
26+
export default {
27+
name: 'CheckStrict',
28+
data () {
29+
return {
30+
checkedValues: [],
31+
treeData,
32+
}
33+
},
34+
computed: {
35+
visibleClose: function() {
36+
return this.checkedValues.filter(item => !item.disabled).length > 0
37+
}
38+
},
39+
mounted() {
40+
this.checkedValues = this.$refs.tree3.getCheckedNodes()
41+
},
42+
methods: {
43+
handleCheckedChange ({ node, selectedData }) {
44+
console.log('clickCheckbox', node, selectedData)
45+
this.checkedValues = selectedData
46+
},
47+
clearChecked() {
48+
this.$refs.tree3.clear()
49+
this.checkedValues = this.$refs.tree3.getCheckedNodes()
50+
},
51+
removeChecked(node, index) {
52+
this.$refs.tree3.removeCheckedNode(node, index)
53+
},
54+
}
55+
56+
}
57+
58+
</script>
59+
<style lang="less" scoped>
60+
.test-tree {
61+
width: 400px;
62+
}
63+
.edit-container {
64+
position: relative;
65+
min-height: 36px;
66+
}
67+
.close-btn {
68+
position: absolute;
69+
top: 50%;
70+
right: 6px;
71+
transform: translateY(-50%);
72+
color: #999;
73+
cursor: pointer;
74+
}
75+
</style>

‎examples/src/views/custom/index.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="test-tree">
3+
<VueTree
4+
ref="tree4"
5+
:treeData="treeData"
6+
showCheckbox>
7+
<template v-slot="{ node, treeNode }">
8+
<span style="color: #f00">{{node.name}}</span>
9+
<a class="link-color ml20" @click.stop="handleAddChild(treeNode)">增加</a>
10+
<a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)">删除</a>
11+
<a class="link-color ml20" @click.stop="toggleDisable(node)">{{ node.disabled ? '开启' : '禁用'}}</a>
12+
</template>
13+
</VueTree>
14+
</div>
15+
</template>
16+
<script>
17+
import { treeData } from '../../assets/treeData'
18+
import Mock from '../../utils/mock'
19+
20+
export default {
21+
name: 'Custom',
22+
data () {
23+
return {
24+
treeData
25+
}
26+
},
27+
methods: {
28+
handleAddChild(treeNode) {
29+
this.maxId += 1
30+
const { name } = Mock.mock({'name': "@ctitle(4,6)"})
31+
const treeData = {
32+
id: this.maxId,
33+
name
34+
}
35+
this.$refs.tree4.appendChild(treeData, treeNode)
36+
},
37+
handleRemoveChild(treeNode) {
38+
this.$refs.tree4.removeChild(treeNode)
39+
},
40+
toggleDisable(node) {
41+
this.$set(node, 'disabled', !node.disabled)
42+
},
43+
44+
45+
}
46+
47+
}
48+
</script>

‎examples/src/views/loadLazy/index.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="test-tree">
3+
<VueTree
4+
ref="lazyTree"
5+
lazy
6+
immediatelyLoad
7+
:load="loadMore"
8+
/>
9+
</div>
10+
</template>
11+
<script>
12+
import Mock from '../../utils/mock'
13+
export default {
14+
name: 'LazyLoad',
15+
methods: {
16+
loadMore(node, resolve) {
17+
const level = node.level? node.level + 1 : 1
18+
setTimeout(() => {
19+
if (level < 3) {
20+
const { data } = Mock.mock({
21+
'data|1-3': [{
22+
'id': /[a-z]{2}[A-Z]{2}[0-9]/,
23+
'name': "@ctitle(4,6)",
24+
level: level
25+
}]
26+
})
27+
resolve(data)
28+
} else {
29+
resolve([])
30+
}
31+
}, 1200)
32+
}
33+
}
34+
}
35+
36+
</script>

‎examples/src/views/multiple/index.vue‎

Whitespace-only changes.

0 commit comments

Comments
 (0)