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(Progress): correct pivot position (#4396)

Browse Source
This commit is contained in:
neverland 2019-09-08 16:37:44 +08:00 committed by GitHub
parent cea68ff252
commit 88433a9c61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/progress/index.js
View File

@ -60,17 +60,18 @@ export default createComponent({
const pivotStyle = { const pivotStyle = {
color: this.textColor, color: this.textColor,
left: `${(this.progressWidth - this.pivotWidth) * percentage / 100}px`,
background: this.pivotColor || background background: this.pivotColor || background
}; };
const portionStyle = { const portionStyle = {
background, background,
width: ((this.progressWidth - this.pivotWidth) * percentage) / 100 + 'px' width: (this.progressWidth * percentage) / 100 + 'px'
}; };
return ( return (
<div class={bem()}> <div class={bem()}>
<span class={bem('portion', { 'with-pivot': showPivot })} style={portionStyle}> <span class={bem('portion')} style={portionStyle}>
{showPivot && ( {showPivot && (
<span ref="pivot" style={pivotStyle} class={bem('pivot')}> <span ref="pivot" style={pivotStyle} class={bem('pivot')}>
{text} {text}

10
src/progress/index.less
View File

@ -11,19 +11,13 @@
left: 0; left: 0;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
&--with-pivot {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
} }
&__pivot { &__pivot {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0;
box-sizing: border-box; box-sizing: border-box;
min-width: 2em; min-width: 3.6em;
padding: @progress-pivot-padding; padding: @progress-pivot-padding;
font-size: @progress-pivot-font-size; font-size: @progress-pivot-font-size;
line-height: @progress-pivot-line-height; line-height: @progress-pivot-line-height;
@ -31,6 +25,6 @@
word-break: keep-all; word-break: keep-all;
background-color: @progress-pivot-background-color; background-color: @progress-pivot-background-color;
border-radius: 1em; border-radius: 1em;
transform: translate(100%, -50%); transform: translate(0, -50%);
} }
} }

10
src/progress/test/__snapshots__/demo.spec.js.snap
View File

@ -3,15 +3,15 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">50%</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(202, 202, 202);">50%</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(242, 130, 106);">橙色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(238, 10, 36);">红色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221);">紫色</span></span></div> <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
</div> </div>
</div> </div>
`; `;

2
src/progress/test/__snapshots__/index.spec.js.snap
View File

@ -2,4 +2,4 @@
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`; exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`;
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`; exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">test</span></span></div>`;