当前位置：文江博客话题详情

vue+js+css怎么实现以下的样式，点击A或者B，出现在右侧的方框中

发布于 2022-09-12 23:02:29 字数 57 浏览 16 评论 0

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷爱 2022-09-19 23:02:29

用canvas画蛮简单的这个效率也快。
用div画定位不要想曲线一步到位拆分成不同div;
用现成框架 D3 Echarts antv gojs这些库 PS:渲染引擎不过都是canvas || svg

回复收藏 0

数理化全能战士 2022-09-19 23:02:29

之前碰巧做过这种结构的东西，用的flex布局，上下左右四个方向均包含，部分内容不方便截图，仅对于实现的思路说明下，希望对你有帮助

对于你需要的左右结构的二叉树，那么每一级为一层node-wrap,最外层的node-box，使用display:flex; align-items:center;,每一层node-wrap使用flex-direction:column,针对横向的线条，对于每个node-item使用定位，利用伪类显示，而属相的层级的线条，使用node-wrap的伪类，长度需要动态计算 = calc(100% - 上一层第一个高度半值 - 最后一个高度半值）

部分关键代码贴一部分：

// Right Nodes Box Stylus
.right-nodes-box {
  position: relative;
  display: flex;
  flex-direction: column;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    height: calc(100% - #{$node-height} - 80px - 2px);
    width: 2px;
    background: $border-color;
    bottom: ($node-height + 2px + 80px) / 2;
  }
  .node-wrap {
    padding: 40px 0 40px 70px;
    flex-direction: row;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: calc(50% - 2px);
      width: 70px;
      height: 2px;
      background: #00aaff;
    }
    &:not(:first-child):not(:last-child) {
      .nodes-child-box {
        position: relative;
        bottom: 0;
      }
    }
    &::after {
      content: '';
      position: absolute;
      left: 40px;
      bottom: 50%;
      margin-bottom: -8px;
      transform: translateX(-50%);
      width: 0;
      border-color:  transparent transparent transparent #00aaff;
      border-style: solid;
      border-width: 8px 6px 8px;
    }
  }
  &.onlyone {
    .node-wrap {
      padding-left: 0;
      &::before, &::after {
        content: none;
      }
    }
  }
}
.node-wrap .right-nodes-box {
  position: absolute;
  left: $node-width + 100px + 42px;
  z-index: -1;
    display: flex;
  margin-left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

主要是看你怎么想你的实现思路，针对实现思路再去考虑相应的代码如何去写~

希望对你有帮助~

回复收藏 0