vue css实现两个元素之间连线箭头,v-for循环每两个直接添加连线箭头

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

ing X

4989人浏览 · 2023-01-12 11:32:17

ing X · 2023-01-12 11:32:17 发布

先看效果
在这里插入图片描述
1.上面5个元素是v-for循环出来的，在每两个元素之间添加一条带箭头的连线

//渲染的vue代码
<a-col :span="4" v-for="(item, index) in processData" :key="item"  :class="getClass(index)">

2.css通过:before和:after 来绘制线条和箭头，在元素之前加箭头，之后加线条，调整top使其保持在一条线上，left和width控制线条和箭头的位置

.col-af::after {
    position: absolute;
    top: 15%;
    left: 75%;
    display: block;
    width: 68%;
    height: 1px;
    border-top: dotted 1px #599fdd;
    content: "";
}
.col-bf::before {
    position: absolute;
    top: 4%;
    left: 28%;
    display: block;
    width: 70%;
    height: 1px;
    color: #599fdd;
    content: ">";
}

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

3.通过元素的index绑定class，第一个元素不加before,最后一个元素不加after

  getClass(index) {
            let cls = "";
            if (index !== this.processData.length - 1) {
                cls += "col-af";
            }
            if (index !== 0) {
                cls += " col-bf";
            }
            return cls;
        }

一开始只用了：after，content:“—>”无奈不知道怎么设置centent宽度自适应。拉伸窗口箭头不能自适应变化长度。所以采用了文中的形式。

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：7 个月前 )

9e887079 [skip ci] 6 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 9 个月前