8000 fix: optimize code · Create-Peace/light-vue-tree@c670098 · GitHub
[go: up one dir, main page]
Skip to content

Commit c670098

Browse files
Create-PeaceCreate-Peace
committed
fix: optimize code
1 parent 26a294a commit c670098

File tree

3 files changed

+49
-33
lines changed

3 files changed

+49
-33
lines changed

‎src/components/Tree.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,6 @@ export default {
253253
let indicatorTop = -9999;
254254
const distance = event.clientY - targetPosition.top;
255255

256-
console.log('distance', distance)
257256
if (distance < targetPosition.height * prevPercent) {
258257
dropType = "before";
259258
} else if (distance > targetPosition.height * nextPercent) {

‎src/components/TreeNode.js

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11

22

33
import Emitter from '../mixins/Emitter'
4+
import TreeNodeContent from './TreeNodeContent'
45
export default {
56
name: 'TreeNode',
67
mixins: [Emitter],
8+
component: {
9+
TreeNodeContent
10+
},
711
props: {
812
node: [Object],
913
level: {
@@ -23,40 +27,10 @@ export default {
2327
this.tree = this.$parent.tree
2428
}
2529
},
26-
methods: {
27-
selectToggle(node){
28-
Object.assign(node.data, {selected: !node.isSelected(), partialSelected: false})
29-
if (!this.tree.checkStrictly) {
30-
this.tree.refreshUp(node)
31-
this.tree.refreshDown(node)
32-
} else {
33-
this.tree.getCheckedValue(node)
34-
}
35-
36-
this.tree.$emit('on-checkbox-change', this.tree.checkedNodes, this.tree.checkedNodeKeys)
37-
this.tree.$emit('on-checked-item', node.data)
38-
},
30+
methods: {
3931
nodeView (node, level) {
40-
const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
41-
const { renderTreeNode, $scopedSlots: { default: defaultSlot } } = this.tree
42-
43-
return (name && <div
44-
class="tree-node-content"
45-
style={`margin-left: ${level * 10}px; display: inline-block;`}
46-
>
47-
{<span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.foldToggle(node)} style={{padding: 1, background: '#eee', cursor: 'pointer', visibility: node.children && node.children.length ? 'visible' : 'hidden'}}>▲</span>}
48-
{ partialSelected && `-`}
49-
{this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
50-
<div class='tree-node-name'>{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }</div>
51-
</div>)
52-
},
53-
foldToggle(node) {
54-
Object.assign(node.data, {expanded: !node.data.expanded})
55-
if (!node.data.expanded) {
56-
this.tree.refreshExpandedDown(node)
57-
}
32+
return (<TreeNodeContent node={node} level={level} tree={this.tree} />)
5833
}
59-
6034
},
6135

6236
render () {

‎src/components/TreeNodeContent.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export default {
2+
name: 'TreeNodeContent',
3+
props: {
4+
tree: [Object],
5+
level: [Number],
6+
node: [Object]
7+
},
8+
methods: {
9+
foldToggle(node) {
10+
Object.assign(node.data, {expanded: !node.data.expanded})
11+
if (!node.data.expanded) {
12+
this.tree.refreshExpandedDown(node)
13+
}
14+
},
15+
selectToggle(node){
16+
Object.assign(node.data, {selected: !node.isSelected(), partialSelected: false})
17+
if (!this.tree.checkStrictly) {
18+
this.tree.refreshUp(node)
19+
this.tree.refreshDown(node)
20+
} else {
21+
this.tree.getCheckedValue(node)
22+
}
23+
24+
this.tree.$emit('on-checkbox-change', this.tree.checkedNodes, this.tree.checkedNodeKeys)
25+
this.tree.$emit('on-checked-item', node.data)
26+
}
27+
},
28+
render () {
29+
const { level, node, tree } = this
30+
const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
31+
const { renderTreeNode, $scopedSlots: { default: defaultSlot } } = tree
32+
33+
return (name && <div
34+
class="tree-node-content"
35+
style={`margin-left: ${level * 10}px; display: inline-block;`}
36+
>
37+
{<span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.foldToggle(node)} style={{padding: 1, background: '#eee', cursor: 'pointer', visibility: node.children && node.children.length ? 'visible' : 'hidden'}}>▲</span>}
38+
{ partialSelected && `-`}
39+
{this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
40+
<div class='tree-node-name'>{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }</div>
41+
</div>)
42+
}
43+
}

0 commit comments

Comments
 (0)
0