V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
yazoox
V2EX  ›  React

看到一些树型控件,展开父节点后,父节点和子节点之间,有 dot line 连接,这个是如何实现的?

  •  
  •   yazoox · 84 天前 · 1145 次点击
    这是一个创建于 84 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不知道应该放在 css 还是 react (我司开发,主要用的 react )分类里面。

    如图
    Tree.png

    想请教一下,这个 dot-lines (还带转弯的有竖有横),是怎么画出来的?直接通过 css 么?

    谢谢!

    7 条回复    2021-08-06 09:20:19 +08:00
    AlphaTr
        1
    AlphaTr   84 天前
    直接通过 CSS 来实现吧,垂直方向的给展开的父级来添加 :after 伪元素,水平方向的给每个非根子元素添加伪元素
    liyang5945
        2
    liyang5945   84 天前
    以前用过一个 ztree 的插件是用背景图实现的
    des
        3
    des   84 天前 via iPhone
    通过多个图形组合,图片或者 css 都行,注意调整间距
    当然你要用 svg 做整一个也不是不行
    jorneyr
        4
    jorneyr   84 天前   ❤️ 1
    可以参考 http://qtdebug.com/qtbook-qss-subcontrol/#QTreeView 这个的图,比较直观的看到树的样式,每一级的缩进都有 n 个 div 块,对每一个块进行计算得到它要填充什么图案。
    old9
        5
    old9   84 天前
    写过一个简单的,就是用 :before :after 画 border,结构就是基本的 ul >li > (span + ul)
    yazoox
        6
    yazoox   84 天前
    @old9 一定要用 ul > li > span 么?我们的 treeview/item 没有用 ul & li
    old9
        7
    old9   83 天前
    @yazoox 只是举例描述一下结构,ul li 比较好理解层级关系,具体用什么 tag 无所谓,反正是 css 控制
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1313 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:22 · PVG 02:22 · LAX 11:22 · JFK 14:22
    ♥ Do have faith in what you're doing.