右边是列表,左边是一个按钮(点击“或”会变成“且”, 反之)
圆圈上下是伪元素。伪元素的高度动态配置,根据左边列表的高度来
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 //动态取右边列表的高度
}
})
}
},
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;
}
}
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...