版本一
html:
<div class="gather">
<div class="tree">123</div>
<div class="tree">123</div>
<div class="tree">123</div>
<div class="tree">123</div>
<div class="tree">123</div>
</div>
css:
<style lang="scss">
.tree {
position: relative;
}
.gather {
width: 30px;
position: relative;
border: 1px solid red;
}
.gather::after {
content: "";
display: block;
position: absolute;
width: 3px;
height: 100%;
background: red;
right: -23px;
top: 0;
}
.tree::after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 3px;
background: red;
right: -20px;
top: 50%;
}
</style>
效果：
版本二
需求：点击表单增加按钮，自动增加一个input框，并增加关联样式，参考效果图；
html:
<el-form
ref="form"
:model="form"
label-width="80px"
class="form"
:style="{ '--height': height + 'px' }"//这是改变伪元素的写法
>
<div v-for="(item, index) in form.list" :key="index">
<el-form-item label="活动名称">
<el-input
v-model="item.name"
class="input tree1"
></el-input>
</el-form-item>
</div>
</el-form>
<button @click="btn">增加</button>
js:
<script>
export default {
name: "name",
data() {
return {
height: 0,
form: {
list: [
{
name: "123",
},
],
},
};
},
methods: {
btn() {
this.form.list.push({ name: "456" });
let box = document.getElementsByClassName("form")[0];
//计算节点高度，最后一个input框的高度减去第一个input框的高度//重点：动态计算高度
setTimeout(() => {
let rectObject =box.firstElementChild.getBoundingClientRect().top;
let rectObject1 =box.lastElementChild.getBoundingClientRect().top;
this.height = rectObject1 - rectObject;
}, 100);
},
},
};
</script>
<style lang="scss">
.input {
width: 220px;
}
.form {
position: relative;
width: 320px;
// height: 300px;
border: 10px solid blue;
border: 1px solid red;
}
.form::after {
content: "";
display: block;
position: absolute;
width: 3px;
height: var(--height);
background: red;
right: -3px;
top: 20px;
}
.tree1::after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 3px;
background: red;
right: -20px;
top: 50%;
}
</style>
效果：
