坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › ant-design slider 组件增加推荐区间展示

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

坚果大叔
2024-06-28 16:38:15技术阅读 2,371

前提

在项目开发中有一个模块大批量的使用ant-design slider滑动输入条组件来作为辅助参数输入的方式。现在有需求需要在slider上增加类似推荐区间的展示。

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

思路

第一种方法

一开始是查看官方文档发现可以设置区间值,在尝试过后发现并不能满足业务需求。官方给出的区间值是两个固定的双值并不适合用来做推荐区间。

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

而且他的两个值是固定的,设置之后是完全可以改变区间的。

第二种方法

在查看组件的api方法后,发现有一个marks方法可以自定义设置输入条上面的刻度。而且不影响选值的操作。

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

那我是不是可以设置两个刻度来作为推荐区间呢?结果还是我大意了,官方给出的方法只是标记了两个点。但是两个点之间的样式没有办法修改。

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

看着这张图我陷入了沉思,随手打开控制台看到每个标记点有一个 dot 标签。我直接将一个 dot标签的宽度拉长不就可以了。因为不同类型的选项有同的推荐区间。那设定固定的宽度用两个 class 来标识。在更加类型来显示哪个class 就可以另类的实现推荐区间样式。

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

实现代码

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代码

最终效果

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

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

赞赏 赞(0)
自驾太湖龙之梦动物世界~
上一篇
老家的桃树和梨树
下一篇
在小程序中查看
搜你想看的
聚合文章
Vite自动全局注册组件!
微信小程序批量提交后台审核
Python爬取微信好友昵称和头像
如何获取微信文章封面和文章标题!
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,996 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,329 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,033 4
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢