Skip to content

[Bug 上报] Slider 滑块的min label 和 max label 默认margin 没生效 #714

@xiaotong-tong

Description

@xiaotong-tong

Wot Design Uni 版本号

1.3.13

平台

微信小程序

复现Demo地址(如不提供,将被直接关闭)

官网 https://wot-design-uni.cn/component/slider.html

重现步骤

官网滑块demo中,将滑块拖动到最高点,滑块 point 会挡住 min 和 max label。

期望的结果是什么?

min label 和 max label 距离 bar 有一段 margin,在 point 移动到顶点时不会遮挡文字

实际的结果是什么?

min label 和 max label 距离 bar 之间的 margin 没生效。

检查样式会发现如此样式,但是该样式没生效。

.wd-slider__label-max[data-v-0d14edbe] {
    margin-left: var(--wot-slider-handle-radius, 12px) 11px;
}

环境信息

No response

其他补充信息

将 wd-slider/index.scss 中的第 79 和 82 行 修改应该就可以解决

@include e(label-min) {
---  margin-right: $-slider-handle-radius + 11px;
+++  margin-right: calc($-slider-handle-radius + 11px);
  }
  @include e(label-max) {
---    margin-left: $-slider-handle-radius + 11px;
+++    margin-left: calc($-slider-handle-radius + 11px);
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions