github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(slider): fix incorrect placement of dots and marker text

pull/8171/head
ayang 2025-05-13 19:41:25 +08:00
parent aa211fd789
commit 5d35f52968
No known key found for this signature in database
GPG Key ID: 7CF0B972091D5C0C
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/vc-slider/src/common/Marks.tsx
View File

@ -40,7 +40,8 @@ const Marks = (_: any, { attrs, slots }: any) => {
}); });
const bottomStyle = { const bottomStyle = {
marginBottom: '-50%', transform: `translateY(${reverse ? `-50%` : `50%`})`,
msTransform: `translateY(${reverse ? `-50%` : `50%`})`,
[reverse ? 'top' : 'bottom']: `${((point - min) / range) * 100}%`, [reverse ? 'top' : 'bottom']: `${((point - min) / range) * 100}%`,
}; };

14
components/vc-slider/src/common/Steps.tsx
View File

@ -53,8 +53,18 @@ const Steps = (_: any, { attrs }) => {
(!included && point === upperBound) || (!included && point === upperBound) ||
(included && point <= upperBound && point >= lowerBound); (included && point <= upperBound && point >= lowerBound);
let style = vertical let style = vertical
? { ...dotStyle, [reverse ? 'top' : 'bottom']: offset } ? {
: { ...dotStyle, [reverse ? 'right' : 'left']: offset }; ...dotStyle,
[reverse ? 'top' : 'bottom']: offset,
transform: `translateY(${reverse ? '-50%' : '50%'})`,
msTransform: `translateY(${reverse ? '-50%' : '50%'})`,
}
: {
...dotStyle,
[reverse ? 'right' : 'left']: offset,
transform: `translateX(${reverse ? '50%' : '-50%'})`,
msTransform: `translateX(${reverse ? '50%' : '-50%'})`,
};
if (isActived) { if (isActived) {
style = { ...style, ...activeDotStyle }; style = { ...style, ...activeDotStyle };
} }