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

执行上下文

发布于 2024-07-04 11:17:58

540

发布于 2024-07-04 11:17:58

文章被收录于专栏：执行上下文执行上下文

前提

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