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

fix(Circle): stroke-width can't be greater than 60 (#4256)

Browse Source
This commit is contained in:
neverland 2019-08-27 17:37:49 +08:00 committed by GitHub
parent a842da803f
commit f32104ad86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/circle/index.js
View File

@ -12,9 +12,9 @@ function format(rate) {
return Math.min(Math.max(rate, 0), 100); return Math.min(Math.max(rate, 0), 100);
} }
function getPath(clockwise) { function getPath(clockwise, viewBoxSize) {
const sweepFlag = clockwise ? 1 : 0; const sweepFlag = clockwise ? 1 : 0;
return `M 530 530 m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
} }
export default createComponent({ export default createComponent({
@ -72,7 +72,11 @@ export default createComponent({
}, },
path() { path() {
return getPath(this.clockwise); return getPath(this.clockwise, this.viewBoxSize);
},
viewBoxSize() {
return 1000 + this.strokeWidth;
}, },
layerStyle() { layerStyle() {
@ -154,7 +158,7 @@ export default createComponent({
render() { render() {
return ( return (
<div class={bem()} style={this.style}> <div class={bem()} style={this.style}>
<svg viewBox="0 0 1060 1060"> <svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
{this.LinearGradient} {this.LinearGradient}
<path class={bem('hover')} style={this.hoverStyle} d={this.path} /> <path class={bem('hover')} style={this.hoverStyle} d={this.path} />
<path <path

3
src/circle/index.less
View File

@ -14,9 +14,6 @@
} }
&__layer { &__layer {
// should not use transform-origin: center
// that will cause incorrect style in android devices
transform-origin: 530px 530px;
fill: none; fill: none;
stroke-linecap: round; stroke-linecap: round;
} }

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

@ -3,9 +3,9 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; 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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">70%</div> <div class="van-circle__text">70%</div>
</div> </div>
@ -17,33 +17,33 @@ exports[`renders demo correctly 1`] = `
</svg> </svg>
<div class="van-circle__text">宽度定制</div> <div class="van-circle__text">宽度定制</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" 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" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#f44" class="van-circle__layer" style="stroke: #f44; 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" stroke="#f44" class="van-circle__layer" style="stroke: #f44; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">颜色定制</div> <div class="van-circle__text">颜色定制</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<defs> <defs>
<linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%"> <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#ffd01e"></stop> <stop offset="0%" stop-color="#ffd01e"></stop>
<stop offset="100%" stop-color="#ee0a24"></stop> <stop offset="100%" stop-color="#ee0a24"></stop>
</linearGradient> </linearGradient>
</defs> </defs>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 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__layer" 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" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">渐变色</div> <div class="van-circle__text">渐变色</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" 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" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">逆时针</div> <div class="van-circle__text">逆时针</div>
</div> </div>
<div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" 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" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">大小定制</div> <div class="van-circle__text">大小定制</div>
</div> </div>

12
src/circle/test/__snapshots__/index.spec.js.snap
View File

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`size prop 1`] = ` exports[`size prop 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
</svg></div> </svg></div>
`; `;
exports[`speed is 0 1`] = ` exports[`speed is 0 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; 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" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
</svg></div> </svg></div>
`; `;