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 c670098

Browse files
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)

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