fix: optimize code

Author: Create-Peace

src/components/Tree.js

@@ -253,7 +253,6 @@ export default {
       let indicatorTop = -9999;
       const distance = event.clientY - targetPosition.top;
 
-      console.log('distance', distance)
       if (distance < targetPosition.height * prevPercent) {
         dropType = "before";
       } else if (distance > targetPosition.height * nextPercent) {

src/components/TreeNode.js

@@ -1,9 +1,13 @@
 
 
 import Emitter from '../mixins/Emitter'
+import TreeNodeContent from './TreeNodeContent'
 export default {
   name: 'TreeNode',
   mixins: [Emitter],
+  component: {
+    TreeNodeContent
+  },
   props: {
     node: [Object],
     level: {
@@ -23,40 +27,10 @@ export default {
       this.tree = this.$parent.tree
     }
   },
-  methods: {
-    selectToggle(node){
-      Object.assign(node.data, {selected: !node.isSelected(), partialSelected: false})
-      if (!this.tree.checkStrictly) {
-        this.tree.refreshUp(node)
-        this.tree.refreshDown(node)
-      } else {
-        this.tree.getCheckedValue(node)
-      }
-      
-      this.tree.$emit('on-checkbox-change', this.tree.checkedNodes, this.tree.checkedNodeKeys)
-      this.tree.$emit('on-checked-item', node.data)
-    },
+  methods: {  
     nodeView (node, level) {
-      const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
-      const { renderTreeNode, $scopedSlots: { default: defaultSlot } } = this.tree
-
-      return (name && <div
-      class="tree-node-content"
-       style={`margin-left: ${level * 10}px; display: inline-block;`}
-       >
-        {<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>}
-        { partialSelected && `-`}
-        {this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
-        <div class='tree-node-name'>{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }</div>
-      </div>)
-    },
-    foldToggle(node) {
-      Object.assign(node.data, {expanded: !node.data.expanded})
-      if (!node.data.expanded) {
-        this.tree.refreshExpandedDown(node)
-      }
+      return (<TreeNodeContent node={node} level={level} tree={this.tree} />)
     }
-    
   },
 
   render () {

src/components/TreeNodeContent.js

@@ -0,0 +1,43 @@
+export default {
+  name: 'TreeNodeContent',
+  props: {
+    tree: [Object],
+    level: [Number],
+    node: [Object]
+  },
+  methods: {
+    foldToggle(node) {
+      Object.assign(node.data, {expanded: !node.data.expanded})
+      if (!node.data.expanded) {
+        this.tree.refreshExpandedDown(node)
+      }
+    },
+    selectToggle(node){
+      Object.assign(node.data, {selected: !node.isSelected(), partialSelected: false})
+      if (!this.tree.checkStrictly) {
+        this.tree.refreshUp(node)
+        this.tree.refreshDown(node)
+      } else {
+        this.tree.getCheckedValue(node)
+      }
+      
+      this.tree.$emit('on-checkbox-change', this.tree.checkedNodes, this.tree.checkedNodeKeys)
+      this.tree.$emit('on-checked-item', node.data)
+    }
+  },
+  render () {
+    const { level, node, tree } = this
+    const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
+    const { renderTreeNode, $scopedSlots: { default: defaultSlot } } = tree
+
+    return (name && <div
+      class="tree-node-content"
+       style={`margin-left: ${level * 10}px; display: inline-block;`}
+       >
+        {<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>}
+        { partialSelected && `-`}
+        {this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
+        <div class='tree-node-name'>{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }</div>
+      </div>)
+  }
+}