前提
有一个ui需求需要实现类似在线画布功能那种边框带刻度尺的效果。主要是上边框和左边框需要实现此UI效果。
效果如下
业务需求
除了上面的效果之外,还需要每个大刻度是需要点击选中的。并且选中还有单独的选中样式。
解决思路
1、第一种想法就是通过div实现,大刻度用边框来实现,里面的小刻度用10个标签来实现。
2、通过css的background-image属性种 linear-gradient 方法来实现。
3、第一种和第二种结合,外侧大标签用border来实现,里面的小刻度用background-image来实现。
实现方案
尝试过后可以完美实现刻度尺的样式。但是因为实际需求需要可以点击选中,而且选中后刻度颜色需要改变所以选中第三种方式来实现。
具体代码
数据结构
cemeteryData: [
{
name: 'B1',
id: 'b1',
active: false,
},
{
name: 'B2',
id: 'b2',
},
]
HTML代码
{{ index + 1 }}列
CSS代码
.topScale {
width: 100%;
display: flex;
.scaleItem {
position: relative;
flex: 1;
height: 40px;
text-align: center;
cursor: pointer;
border: 1px solid #83aef9;
border-top: none;
border-right: none;
&:last-child {
border-right: 1px solid #83aef9;
}
.scale {
position: absolute;
bottom: 0;
left: 10%;
width: 80%;
height: 10px;
background-image: linear-gradient(90deg, #83aef9 1px, transparent 0);
background-size: 75px 0px, 11% 10px;
}
&.scaleActive {
--active-color: #fddae2;
background-color: var(--active-color);
border-left-color: var(--active-color);
border-bottom-color: var(--active-color);
.scale {
background-image: linear-gradient(90deg, var(--active-color) 1px, transparent 0);
}
&:last-child {
border-right-color: var(--active-color);
}
+ .scaleItem {
border-left-color: var(--active-color);
}
}
}
}
其中有两个地方需要注意,一个是 background-size: 75px 0px, 11% 10px; 设置横向的时候小刻度的间隔,10px是设置纵向的时候刻度的间隔。
还有个就是选中之后的样式,因为大标签的刻度是用的border来实现的。为防止边框重叠设置的右边框没有,只有最后一个元素的右边框才有。所以在选中的时候当前item的右边框是没有的,所以就需要将选中右侧item的左边框设置选中颜色。 通过 + .scaleItem来选中邻居class.