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

chore(Circle): use tsx

Browse Source
This commit is contained in:
chenjiahan 2020-10-09 19:29:04 +08:00
parent 3460351ce3
commit d207902e47
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/circle/README.zh-CN.md
View File

@ -134,7 +134,7 @@ export default {
| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` | | speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
| text | 文字 | _string_ | - | | text | 文字 | _string_ | - |
| stroke-width | 进度条宽度 | _number \| string_ | `40` | | stroke-width | 进度条宽度 | _number \| string_ | `40` |
| stroke-linecap | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` | | stroke-linecap | 进度条端点的形状，可选值为 `sqaure` `butt` | _string_ | `round` |
| clockwise | 是否顺时针增加 | _boolean_ | `true` | | clockwise | 是否顺时针增加 | _boolean_ | `true` |
### Slots ### Slots

18
src/circle/index.js → src/circle/index.tsx
View File

@ -1,4 +1,4 @@
import { watch, computed } from 'vue'; import { watch, computed, PropType } from 'vue';
import { raf, cancelRaf } from '@vant/use'; import { raf, cancelRaf } from '@vant/use';
import { isObject, getSizeStyle, createNamespace } from '../utils'; import { isObject, getSizeStyle, createNamespace } from '../utils';
import { BLUE, WHITE } from '../utils/constant'; import { BLUE, WHITE } from '../utils/constant';
@ -7,11 +7,11 @@ const [createComponent, bem] = createNamespace('circle');
let uid = 0; let uid = 0;
function format(rate) { function format(rate: string | number) {
return Math.min(Math.max(rate, 0), 100); return Math.min(Math.max(+rate, 0), 100);
} }
function getPath(clockwise, viewBoxSize) { function getPath(clockwise: boolean, viewBoxSize: number) {
const sweepFlag = clockwise ? 1 : 0; const sweepFlag = clockwise ? 1 : 0;
return `M ${viewBoxSize / 2} ${ return `M ${viewBoxSize / 2} ${
viewBoxSize / 2 viewBoxSize / 2
@ -21,7 +21,7 @@ function getPath(clockwise, viewBoxSize) {
export default createComponent({ export default createComponent({
props: { props: {
text: String, text: String,
strokeLinecap: String, strokeLinecap: String as PropType<CanvasLineCap>,
currentRate: { currentRate: {
type: Number, type: Number,
default: 0, default: 0,
@ -76,7 +76,9 @@ export default createComponent({
const startTime = Date.now(); const startTime = Date.now();
const startRate = props.currentRate; const startRate = props.currentRate;
const endRate = format(rate); const endRate = format(rate);
const duration = Math.abs(((startRate - endRate) * 1000) / props.speed); const duration = Math.abs(
((startRate - endRate) * 1000) / +props.speed
);
const animate = () => { const animate = () => {
const now = Date.now(); const now = Date.now();
@ -91,7 +93,9 @@ export default createComponent({
}; };
if (props.speed) { if (props.speed) {
cancelRaf(rafId); if (rafId) {
cancelRaf(rafId);
}
rafId = raf(animate); rafId = raf(animate);
} else { } else {
emit('update:currentRate', endRate); emit('update:currentRate', endRate);