020Element-plus的el-tree功能预研2-拖拽样式逻辑处理

020Element-plus的el-tree功能预研2-拖拽样式逻辑处理

Element-plus原生样式在源代码的这个位置packages\theme-chalk\src\tree.scss

  @include when(drop-inner) {
    > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
      background-color: getCssVar('color-primary');
      color: #fff;
    }
  }

原生的tree组件在packages\components\tree\src\tree.vue

  <div
    ref="el$"
    :class="[
      ns.b(),
      ns.is('dragging', !!dragState.draggingNode),
      ns.is('drop-not-allow', !dragState.allowDrop),
      ns.is('drop-inner', dragState.dropType === 'inner'),
      { [ns.m('highlight-current')]: highlightCurrent },
    ]"
    role="tree"
  >

处理插入俩节点之间的样式

:deep(.el-tree__drop-indicator) {
  position: absolute;
  left: 0;
  right: 0;
  width: 228px;
  height: 3px;
  background-color: rgba($color: #009fa8, $alpha: 0.8);
}

拖拽到某个节点，响应的背景色

:deep(.el-tree-node.is-drop-inner
    > .el-tree-node__content
    .el-tree-node__label) {
  background: rgba($color: #04fd70, $alpha: 0.3);
  color: #000;
}

处理tree的左侧展开图标样式，保持与label区标题栏一致

:deep(.el-tree-node__content > .el-icon, .el-tree-node__expand-icon) {
  width: 32px;
  height: 32px;
  padding: 0;
}