blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Slider): incorrect bar-height when vertical (#6065)

Browse Source
This commit is contained in:
neverland 2020-04-16 16:23:32 +08:00 committed by GitHub
parent 455be42c11
commit 63f789646d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/slider/index.js
View File

@ -148,16 +148,16 @@ export default createComponent({
render() { render() {
const { vertical } = this; const { vertical } = this;
const style = {
background: this.inactiveColor,
};
const mainAxis = vertical ? 'height' : 'width'; const mainAxis = vertical ? 'height' : 'width';
const crossAxis = vertical ? 'width' : 'height'; const crossAxis = vertical ? 'width' : 'height';
const wrapperStyle = {
background: this.inactiveColor,
[crossAxis]: addUnit(this.barHeight),
};
const barStyle = { const barStyle = {
[mainAxis]: `${((this.value - this.min) * 100) / this.range}%`, [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`,
[crossAxis]: addUnit(this.barHeight),
background: this.activeColor, background: this.activeColor,
}; };
@ -167,7 +167,7 @@ export default createComponent({
return ( return (
<div <div
style={style} style={wrapperStyle}
class={bem({ disabled: this.disabled, vertical })} class={bem({ disabled: this.disabled, vertical })}
onClick={this.onClick} onClick={this.onClick}
> >

13
src/slider/index.less
View File

@ -3,6 +3,7 @@
.van-slider { .van-slider {
position: relative; position: relative;
width: 100%; width: 100%;
height: @slider-bar-height;
background-color: @slider-inactive-background-color; background-color: @slider-inactive-background-color;
border-radius: @border-radius-max; border-radius: @border-radius-max;
cursor: pointer; cursor: pointer;
@ -19,7 +20,8 @@
&__bar { &__bar {
position: relative; position: relative;
height: @slider-bar-height; width: 100%;
height: 100%;
background-color: @slider-active-background-color; background-color: @slider-active-background-color;
border-radius: inherit; border-radius: inherit;
transition: width @animation-duration-fast; transition: width @animation-duration-fast;
@ -57,8 +59,17 @@
.van-slider__button-wrapper { .van-slider__button-wrapper {
top: auto; top: auto;
right: 50%;
bottom: 0; bottom: 0;
transform: translate3d(50%, 50%, 0); transform: translate3d(50%, 50%, 0);
} }
// use pseudo element to expand click area
&::before {
top: 0;
right: -@padding-xs;
bottom: 0;
left: -@padding-xs;
}
} }
} }

4
src/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="height: 4px;">
<div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(238, 10, 36);"> <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper"> <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>

4
src/slider/test/__snapshots__/index.spec.js.snap
View File

@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`bar-height prop 1`] = ` exports[`bar-height prop 1`] = `
<div class="van-slider"> <div class="van-slider" style="height: 10px;">
<div class="van-slider__bar" style="width: 50%; height: 10px;"> <div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper"> <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>