Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d68d051

Browse files
refactor tree
1 parent b85ca4b commit d68d051

File tree

16 files changed

+1475
-182
lines changed

16 files changed

+1475
-182
lines changed

‎src/App.vue‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,12 @@
88
draggable
99
@on-checkbox-change="handleChangeCheckBox"
1010
@on-checked-item="handleChangeItem">
11-
<!-- <template v-slot="{node}">
12-
<span>{{ node.data.name }}</span>
13-
<span class="icon">+</span>
14-
<span class="icon">-</span>
15-
</template> -->
1611
</Tree>
17-
<!-- <List :data="baseData" bordered /> -->
18-
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
19-
<!-- <Dropdown @on-click="handleClick" trigger="click">
20-
<DropdownMenu transfer slot="dropdownList">
21-
<DropdownItem data="上海">上海</DropdownItem>
22-
<DropdownItem data="北京">北京</DropdownItem>
23-
<DropdownItem data="西安">西安</DropdownItem>
24-
</DropdownMenu>
25-
</Dropdown> -->
2612
</div>
2713
</template>
2814

2915
<script>
30-
import Tree from './components/Tree'
16+
import Tree from './components/Tree/Tree'
3117
import Mock from './utils/mock'
3218
export default {
3319
name: 'App',
@@ -376,4 +362,39 @@ export default {
376362
color: #fff;
377363
}
378364
}
365+
.vue-checkbox {
366+
position: relative;
367+
width: 13px;
368+
height: 13px;
369+
&-input {
370+
position: absolute;
371+
width: 100%;
372+
height: 100%;
373+
top: 0;
374+
left: 0;
375+
z-index: 3;
376+
background: transparent
377+
}
378+
&-indeterminate {
379+
box-sizing: border-box;
380+
position: absolute;
381+
width: 100%;
382+
height: 100%;
383+
left: 0;
384+
top: 0;
385+
background: #0075ff;
386+
z-index: 4;
387+
border-radius: 3px;
388+
&:after {
389+
position: absolute;
390+
content: '';
391+
width: 100%;
392+
height: 2px;
393+
background: #fff;;
394+
top: 50%;
395+
left: 0;
396+
}
397+
}
398+
}
399+
379400
</style>

‎src/components/Tree/Checkbox.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
3+
const prefixCls = 'vue-checkbox'
4+
5+
export default {
6+
name: 'Checkbox',
7+
props: {
8+
value: [Boolean],
9+
indeterminate: [Boolean],
10+
disabled: [Boolean]
11+
},
12+
methods: {
13+
handleClick () {
14+
this.$emit('change', this.value)
15+
}
16+
},
17+
render () {
18+
const { value, disabled, indeterminate, handleClick } = this
19+
return (
20+
<div class={prefixCls} onClick={handleClick}>
21+
{ indeterminate && <div class={`${prefixCls}-indeterminate`}></div> }
22+
<input class={`${prefixCls}-input`} checked={value} disabled={disabled} type="checkbox" />
23+
</div>
24+
)
25+
}
26+
}

‎src/components/Tree/GenTree.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import TreeData from './TreeData'
2+
export default {
3+
name: 'GenTree',
4+
data () {
5+
return {
6+
nodeMap: {}
7+
}
8+
},
9+
methods: {
10+
updateNodeChecked (nodeId) {
11+
if (!nodeId || nodeId === 'root') return
12+
const res = {
13+
checked: this.showCheckbox,
14+
selected: !this.showCheckbox
15+
}
16+
if ((Array.isArray(this.checkedValue) && this.checkedValue.includes(nodeId)) || this.checkedValue === nodeId) {
17+
return res
18+
}
19+
},
20+
generateTree (rootNode, props, level = 0) {
21+
const { children, ...rest } = rootNode
22+
const tmpProps = {}
23+
if (rest.id === 'root') { // root node must expanded
24+
tmpProps.expanded = true
25+
}
26+
const node = new TreeData({ ...rest, ...props, ...tmpProps, level, ...this.updateNodeChecked(rest.id) })
27+
this.nodeMap[rest.id] = node
28+
children && children.forEach((child) => {
29+
node.addChild(this.generateTree(child, props, level + 1))
30+
})
31+
return node
32+
},
33+
genFlatTree (node) {
34+
const { children, data = {} } = node
35+
if (!data.expanded || !children || !children.length) return []
36+
return children && children.reduce((total, cur) => {
37+
return total.concat(cur, this.genFlatTree(cur))
38+
}, [])
39+
}
40+
41+
}
42+
}
43+
44+
// export { generateTree, genFlatTree }

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /