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(Circle): the gradient color is incorrect (#7910)

Browse Source 
fix #7897
This commit is contained in:
John 2021-01-15 17:25:16 +08:00 committed by GitHub
parent 0cb3b9e12e
commit d28e535d03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/circle/index.js
View File

@ -84,7 +84,7 @@ export default createComponent({
const offset = (PERIMETER * this.value) / 100;
return {
stroke: `${this.color}`,
stroke: `${this.gradient ? `url(#${this.uid})` : this.color}`,
strokeWidth: `${+this.strokeWidth + 1}px`,
strokeLinecap: this.strokeLinecap,
strokeDasharray: `${offset}px ${PERIMETER}px`,
@ -158,12 +158,7 @@ export default createComponent({
<svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
{this.LinearGradient}
<path class={bem('layer')} style={this.layerStyle} d={this.path} />
<path
d={this.path}
class={bem('hover')}
style={this.hoverStyle}
stroke={this.gradient ? `url(#${this.uid})` : this.color}
/>
<path d={this.path} class={bem('hover')} style={this.hoverStyle} />
</svg>
{this.slots() ||
(this.text && <div class={bem('text')}>{this.text}</div>)}

8
src/circle/test/__snapshots__/demo.spec.js.snap
View File

@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-circle"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">颜色定制</div>
</div>
@ -31,19 +31,19 @@ exports[`renders demo correctly 1`] = `
</linearGradient>
</defs>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__hover" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: url(#van-circle-gradient-3); stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">渐变色</div>
</div>
<div class="van-circle" style="margin-top: 15px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">逆时针</div>
</div>
<div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg>
<div class="van-circle__text">大小定制</div>
</div>