fix: drag icon postition

Author: Create-Peace

src/components/Tree/Tree.js

@@ -498,7 +498,7 @@ export default {
       }
 
       const iconPosition = dropNode.$el
-        .querySelector('.icon')
+        .querySelector('.expand_box')
         .getBoundingClientRect()
       const dropIndicator = this.$refs.dropIndicator
       if (dropType === 'before') {

src/components/Tree/TreeNodeContent.js

@@ -74,7 +74,7 @@ export default {
       const { $scopedSlots: { expandIcon: expandIconSlot }, lazy } = this.tree
       const { node, toggleFold, visibleExpand } = this
       const { data: { expanded, isLeaf }, children } = node
-      return (children && children.length) || (lazy && !isLeaf) ? expandIconSlot ? <div style={{ display: visibleExpand }}>{expandIconSlot({ expanded, node, toggleFold })}</div> : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>) : null
+      return <div class="expand_box" style={{ display: visibleExpand }}>{(children && children.length) || (lazy && !isLeaf) ? expandIconSlot ? expandIconSlot({ expanded, node, toggleFold }) : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>) : null}</div>
     },
     renderCheckbox () {
       const { node, handleClickCheckBox, selectToggle } = this

src/components/Tree/styles/index.less

@@ -1,151 +1,156 @@
-@transition-time        : .2s;
+@transition-time: 0.2s;
 @primary-color: #409eff;
-@background-color-base: #F1F3F5;
-@normal-color: #1F2E4D;
+@background-color-base: #f1f3f5;
+@normal-color: #1f2e4d;
 @unimportance-color: #b7beca;
-@border-radius-small    : 3px;
+@border-radius-small: 3px;
 
 .motion-common() {
-    animation-duration: .3s;
-    animation-fill-mode: both;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
 }
 
 .move-motion(@className, @keyframeName) {
-    .make-motion(@className, @keyframeName);
-    .@{className}-enter-active {
-        animation-timing-function: ease-in-out;
-    }
-    .@{className}-leave-active {
-        animation-timing-function: ease-in-out;
-    }
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter-active {
+    animation-timing-function: ease-in-out;
+  }
+  .@{className}-leave-active {
+    animation-timing-function: ease-in-out;
+  }
 }
 
 .make-motion(@className, @keyframeName) {
-    .@{className}-enter-active {
-        .motion-common();
-        animation-play-state: paused;
-    }
-    .@{className}-leave-active {
-        .motion-common();
-        animation-play-state: paused;
-    }
-    .@{className}-enter-active {
-        animation-name: ~"@{keyframeName}In";
-        animation-play-state: running;
-    }
-    .@{className}-leave-active {
-        animation-name: ~"@{keyframeName}Out";
-        animation-play-state: running;
-    }
+  .@{className}-enter-active {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-leave-active {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+  .@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+  }
 }
 
 .move-motion(transition-drop, shTransitionDrop);
 
 @keyframes shTransitionDropIn {
-    0% {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-    100% {
-        opacity: 1;
-        transform: scaleY(1);
-    }
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 @keyframes shTransitionDropOut {
-    0% {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-    100% {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
 }
 
 .rotate-motion(@className, @deg) {
-    .transform {
-      transform-origin: center;
-      transition: @transition-time;
-    }
-    .@{className}-enter {
-      transform: rotate(@deg);
-      .transform;
-    }
-    .@{className}-leave {
-      transform: rotate(0deg);
-      .transform;
-    }
+  .transform {
+    transform-origin: center;
+    transition: @transition-time;
+  }
+  .@{className}-enter {
+    transform: rotate(@deg);
+    .transform;
+  }
+  .@{className}-leave {
+    transform: rotate(0deg);
+    .transform;
   }
-  .rotate-motion(rotate90, 90deg);
-  .rotate-motion(rotate180, 180deg);
+}
+.rotate-motion(rotate90, 90deg);
+.rotate-motion(rotate180, 180deg);
 
 .vue-tree {
-    user-select: none;
-    position: relative;
-    .drop-indicator {
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background-color: @primary-color;
-    }
-    .child-node {
+  user-select: none;
+  position: relative;
+  .drop-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: @primary-color;
+  }
+  .child-node {
+    padding-left: 22px;
+    line-height: 28px;
+    cursor: pointer;
+    .node-content {
+      width: 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
       padding-left: 22px;
-      line-height: 28px;
-      cursor: pointer;
-      .node-content {
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding-left: 22px;
+      .expand_box {
+        height: 100%;
+        overflow: hidden;
+        position: absolute;
+        display: inline-block;
+        left: 0px;
+        font-size: 12px;
         .icon {
-          position: absolute;
-          display: inline-block;
-          left: 0px;
-          font-size: 12px;
           &-expand {
             color: @normal-color;
           }
           &-unexpand {
             color: @unimportance-color;
           }
         }
-        .inner-wrap {
-          padding-left: 2px;
-          display: flex;
-          align-items: center;
-          border-radius: @border-radius-small;
-          border: 1px solid transparent;
-        }
-        .drop-wrap {
-          border-color: @primary-color;
-        }
-        .drop-inner {
-          border-bottom: 1px solid @primary-color;
-        }
       }
-      .active-li {
-        .inner-wrap {
-          background: @background-color-base;
-        }
+
+      .inner-wrap {
+        padding-left: 2px;
+        display: flex;
+        align-items: center;
+        border-radius: @border-radius-small;
+        border: 1px solid transparent;
       }
-      .inset {
-        cursor: move;
+      .drop-wrap {
+        border-color: @primary-color;
       }
-      .disabled {
-        cursor: no-drop;
+      .drop-inner {
+        border-bottom: 1px solid @primary-color;
       }
     }
-    .add-node {
-      cursor: pointer;
+    .active-li {
+      .inner-wrap {
+        background: @background-color-base;
+      }
+    }
+    .inset {
+      cursor: move;
+    }
+    .disabled {
+      cursor: no-drop;
     }
+  }
+  .add-node {
+    cursor: pointer;
+  }
   .is-drop-inner > .node-content > .inner-wrap > .node-name {
     background-color: @primary-color;
     color: #fff;
   }
-  }
+
   .vue-checkbox {
     position: relative;
     width: 13px;
@@ -158,7 +163,8 @@
       left: 0;
       z-index: 3;
       margin: 0;
-      background: transparent
+      background: transparent;
+      cursor: pointer;
     }
     &-indeterminate {
       box-sizing: border-box;
@@ -172,12 +178,13 @@
       border-radius: 3px;
       &:after {
         position: absolute;
-        content: '';
+        content: "";
         width: 100%;
         height: 2px;
-        background: #fff;;
+        background: #fff;
         top: 50%;
         left: 0;
       }
     }
-  }
+  }
+}