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;
}