alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan
2020-12-01 10:12:54 +08:00
parent d0c4c26d75 b57f7e9d98
commit 28afc8a521
48 changed files with 259 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/circle/README.md
+3
View File
@@ -137,6 +137,9 @@ How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| ------------------------ | ------------------- | ----------- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - |
| @circle-text-color | `@text-color` | - |
| @circle-text-font-weight | `@font-weight-bold` | - |
| @circle-text-font-size | `@font-size-md` | - |
src/circle/README.zh-CN.md
+3
View File
@@ -153,6 +153,9 @@ export default {
| 名称 | 默认值 | 描述 |
| ------------------------ | ------------------- | ---- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - |
| @circle-text-color | `@text-color` | - |
| @circle-text-font-weight | `@font-weight-bold` | - |
| @circle-text-font-size | `@font-size-md` | - |
src/circle/index.less
+7
View File
@@ -3,6 +3,8 @@
.van-circle {
position: relative;
display: inline-block;
width: @circle-size;
height: @circle-size;
text-align: center;
svg {
@@ -14,7 +16,12 @@
}
&__layer {
stroke: @circle-layer-color;
}
&__hover {
fill: none;
stroke: @circle-color;
stroke-linecap: round;
}
src/circle/index.tsx
+15 -25
View File
@@ -1,7 +1,6 @@
import { watch, computed, PropType } from 'vue';
import { raf, cancelRaf } from '@vant/use';
import { isObject, getSizeStyle, createNamespace } from '../utils';
import { BLUE, WHITE } from '../utils/constant';
const [createComponent, bem] = createNamespace('circle');
@@ -21,6 +20,9 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
export default createComponent({
props: {
text: String,
size: [Number, String],
color: [String, Object] as PropType<string | Record<string, string>>,
layerColor: String,
strokeLinecap: String as PropType<CanvasLineCap>,
currentRate: {
type: Number,
@@ -30,10 +32,6 @@ export default createComponent({
type: [Number, String],
default: 0,
},
size: {
type: [Number, String],
default: 100,
},
fill: {
type: String,
default: 'none',
@@ -42,14 +40,6 @@ export default createComponent({
type: [Number, String],
default: 100,
},
layerColor: {
type: String,
default: WHITE,
},
color: {
type: [String, Object],
default: BLUE,
},
strokeWidth: {
type: [Number, String],
default: 40,
@@ -105,16 +95,6 @@ export default createComponent({
);
const renderHover = () => {
const style = {
fill: props.fill,
stroke: props.layerColor,
strokeWidth: `${props.strokeWidth}px`,
};
return <path class={bem('hover')} style={style} d={path.value} />;
};
const renderLayer = () => {
const PERIMETER = 3140;
const { color, strokeWidth, currentRate, strokeLinecap } = props;
const offset = (PERIMETER * currentRate) / 100;
@@ -129,12 +109,22 @@ export default createComponent({
<path
d={path.value}
style={style}
class={bem('layer')}
class={bem('hover')}
stroke={isObject(color) ? `url(#${id})` : color}
/>
);
};
const renderLayer = () => {
const style = {
fill: props.fill,
stroke: props.layerColor,
strokeWidth: `${props.strokeWidth}px`,
};
return <path class={bem('layer')} style={style} d={path.value} />;
};
const renderGradient = () => {
const { color } = props;
@@ -170,8 +160,8 @@ export default createComponent({
<div class={bem()} style={getSizeStyle(props.size)}>
<svg viewBox={`0 0 ${viewBoxSize.value} ${viewBoxSize.value}`}>
{renderGradient()}
{renderHover()}
{renderLayer()}
{renderHover()}
</svg>
{renderText()}
</div>
src/circle/test/__snapshots__/demo.spec.js.snap
+24 -34
View File
@@ -2,19 +2,16 @@
exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
@@ -24,19 +21,16 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1060 1060">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 60px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 60px;"
d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
@@ -44,18 +38,16 @@ exports[`should render demo and match snapshot 1`] = `
Custom Width
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
<path class="van-circle__layer"
style="fill: none; stroke: #ebedf0; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#ee0a24"
>
</path>
@@ -64,9 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
Custom Color
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<defs>
<linearGradient id="van-circle-3"
@@ -85,14 +75,14 @@ exports[`should render demo and match snapshot 1`] = `
</stop>
</linearGradient>
</defs>
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="url(#van-circle-3)"
>
</path>
@@ -102,17 +92,17 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px; margin-top: 15px;"
style="margin-top: 15px;"
>
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
>
</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"
style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#07c160"
>
</path>
@@ -125,14 +115,14 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 120px; height: 120px; margin-top: 15px;"
>
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
>
</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"
style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#7232dd"
>
</path>
src/circle/test/__snapshots__/index.spec.js.snap
+5 -8
View File
@@ -1,19 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should change stroke linecap when using stroke-linecap prop 1`] = `
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
class="van-circle__hover"
>
</path>
</svg>