image.png
右邊是列表，左邊是一個按鈕（點擊“或”會變成“且”雏亚， 反之）
圓圈上下是偽元素焊刹。偽元素的高度動態(tài)配置，根據(jù)左邊列表的高度來
image.png
watch: {
'list': {
handler(newV, oldV) {
if (newV && newV.length > 0) {
this.$nextTick(()=> {
let el = this.$refs.allTagRef
if (el) {
if (this.offsetHeight !== el.offsetHeight) this.offsetHeight = el.offsetHeight //動態(tài)取右邊列表的高度
}
})
}
},
deep: true
}
},
props: {},
computed: {
textBefore() {
return (this.offsetHeight / 2 - 11) + 'px' //前偽元素高度是列表高度/2 - 圓圈一半的高度
},
textTopBefore() {
return '-' + (this.offsetHeight / 2 - 11) + 'px' //前偽元素定位top高度是 - (列表高度/2 - 圓圈一半的高度)
},
textAfter() {
return (this.offsetHeight / 2 - 11) + 'px' //后偽元素高度是列表高度/2 - 圓圈一半的高度
},
},
css部分
.text {
width: 20px;
height: 20px;
border: 1px solid var(--seer-primary);
color: var(--seer-primary);
font-size: 14px;
border-radius: 50%;
text-align: center;
line-height: 20px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
&:after {
width: 1px;
height: var(--title-after);
background-color: var(--seer-primary);
content: '';
display: block;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
&:before {
width: 1px;
height: var(--title-before);
background-color: var(--seer-primary);
content: '';
display: block;
left: 0;
right: 0;
top: var(--title-top-before);
margin: auto;
position: absolute;
}
}
}
