ant-design slider 组件增加推荐区间展示卖坚果的怪叔叔

前提

在项目开发中有一个模块大批量的使用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%;
  }
}

ant-design slider 组件增加推荐区间展示

前提

思路