关键时刻，第一时间送达！
前提
在项目开发中有一个模块大批量的使用ant-design slider滑动输入条组件来作为辅助参数输入的方式。现在有需求需要在slider上增加类似推荐区间的展示。
思路
第一种方法
一开始是查看官方文档发现可以设置区间值，在尝试过后发现并不能满足业务需求。官方给出的区间值是两个固定的双值并不适合用来做推荐区间。
而且他的两个值是固定的，设置之后是完全可以改变区间的。
第二种方法
在查看组件的api方法后，发现有一个marks方法可以自定义设置输入条上面的刻度。而且不影响选值的操作。
那我是不是可以设置两个刻度来作为推荐区间呢？结果还是我大意了，官方给出的方法只是标记了两个点。但是两个点之间的样式没有办法修改。
看着这张图我陷入了沉思，随手打开控制台看到每个标记点有一个 dot 标签。我直接将一个 dot标签的宽度拉长不就可以了。因为不同类型的选项有同的推荐区间。那设定固定的宽度用两个 class 来标识。在更加类型来显示哪个class 就可以另类的实现推荐区间样式。
实现代码
marks生成规则代码
const marks =
anode_count == 1 && currentType
? currentType == 'C'
? {
0: 0,
1: 1,
4: 4,
12: 12,
}
: {
0: 0,
6: 6,
12: 12,
}
: {
0: 0,
12: 12,
};
slider的配置项代码
{
title: '示例',
desc: '推荐勾选',
soureData: data,
formula: formulaData,
attr: 'sei_data',
topAttr: 'sei',
curClass: '',
slideData: {
className:
anode_count == 1 && currentType
? currentType == 'C'
? 'graphite'
: 'siliconCarbon'
: '',
min: 0,
max: 12,
step: 0.1,
included: true,
marks: marks,
},
}
CSS 样式代码
.siliconCarbon {
::v-deep(.ant-slider-dot:nth-child(2):not(:last-child)) {
width: 50%;
}
}
.graphite {
::v-deep(.ant-slider-dot:nth-child(2):not(:last-child)) {
width: 25%;
}
}
HTML代码
<div class="speed-wrap" v-if="props.isSpeed">
<Slider
:class="sliderData.className"
:disabled="!props.canEdit"
:marks="sliderData.marks"
v-model:value="sliderData.grid"
:step="sliderData.step"
:min="sliderData.min"
:max="sliderData.max"
@afterChange="changeSlider"
/>
</div>
最终效果
👆点击查看大图👇
