Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
09ddbe0c
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
09ddbe0c
编写于
12月 03, 2021
作者:
拧
拧巴的猫
提交者:
GitHub
12月 03, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: animatingnumbers cr问题修改 (#41)
* fix: animatingnumbers cr问题修改提交 * fix: animatingnumbers cr问题修改提交
上级
c8542a3f
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
14 addition
and
14 deletion
+14
-14
src/packages/animatingnumbers/countup.tsx
src/packages/animatingnumbers/countup.tsx
+8
-8
src/packages/animatingnumbers/demo.tsx
src/packages/animatingnumbers/demo.tsx
+3
-3
src/packages/animatingnumbers/doc.md
src/packages/animatingnumbers/doc.md
+3
-3
未找到文件。
src/packages/animatingnumbers/countup.tsx
浏览文件 @
09ddbe0c
...
...
@@ -4,7 +4,7 @@ import bem from '@/utils/bem'
export
interface
CountUpProps
{
maxLen
:
number
endNumer
:
string
endNum
b
er
:
string
delaySpeed
?:
number
easeSpeed
:
number
thousands
:
boolean
...
...
@@ -13,26 +13,24 @@ export interface CountUpProps {
}
const
defaultProps
=
{
maxLen
:
0
,
endNumer
:
''
,
endNum
b
er
:
''
,
delaySpeed
:
300
,
easeSpeed
:
1
,
thousands
:
false
,
className
:
''
,
}
as
CountUpProps
export
const
CountUp
:
FunctionComponent
<
Partial
<
CountUpProps
>>
=
(
props
)
=>
{
const
{
maxLen
,
endNumer
,
delaySpeed
,
easeSpeed
,
className
,
thousands
,
...
reset
}
=
{
const
{
maxLen
,
endNum
b
er
,
delaySpeed
,
easeSpeed
,
className
,
thousands
,
...
reset
}
=
{
...
defaultProps
,
...
props
,
}
const
b
=
bem
(
'
countup
'
)
const
countupRef
=
useRef
<
HTMLDivElement
>
(
null
)
const
timerRef
=
useRef
(
0
)
const
numbers
=
Array
.
from
({
length
:
10
}).
map
((
item
,
index
)
=>
{
return
index
})
const
numbers
=
Array
.
from
({
length
:
10
},
(
v
,
i
)
=>
i
)
const
getShowNumber
=
()
=>
{
const
splitArr
=
endNumer
.
split
(
'
.
'
)
const
splitArr
=
endNum
b
er
.
split
(
'
.
'
)
const
intNumber
=
maxLen
&&
splitArr
[
0
].
length
<
maxLen
?
(
Array
(
maxLen
).
join
(
'
0
'
)
+
splitArr
[
0
]).
slice
(
-
maxLen
)
...
...
@@ -49,10 +47,12 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
if
(
countupRef
.
current
)
{
const
numberItems
=
countupRef
.
current
.
querySelectorAll
(
'
.nut-countup__number
'
)
const
numberFilterArr
:
Array
<
string
>
=
numerArr
.
filter
((
item
:
any
)
=>
!
isNaN
(
item
))
for
(
let
[
index
]
of
Object
.
entries
(
numberItems
))
{
for
(
let
index
in
numberItems
)
{
if
(
!
Object
.
prototype
.
hasOwnProperty
.
call
(
numberItems
,
index
))
continue
const
elem
=
numberItems
[
Number
(
index
)]
as
HTMLElement
const
idx
=
Number
(
numberFilterArr
[
Number
(
index
)])
if
((
idx
||
idx
==
0
)
&&
elem
)
{
// 计算规则:父元素和实际列表高度的百分比,分割成20等份
const
transform
=
`translate(0, -
${(
idx
==
0
?
10
:
idx
)
*
5
}
%)`
elem
.
style
.
transform
=
transform
elem
.
style
.
webkitTransform
=
transform
...
...
src/packages/animatingnumbers/demo.tsx
浏览文件 @
09ddbe0c
...
...
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import
{
AnimatingNumbers
}
from
'
./animatingnumbers
'
const
AnimatingNumbersDemo
=
()
=>
{
const
[
endNumer
,
setEndNumer
]
=
useState
(
'
1570.99
'
)
const
[
endNum
b
er
,
setEndNumer
]
=
useState
(
'
1570.99
'
)
useEffect
(()
=>
{
setInterval
(()
=>
{
setEndNumer
(
`
${
Math
.
floor
(
Math
.
random
()
*
999999
)}
.
${
Math
.
floor
(
Math
.
random
()
*
89
+
10
)}
`
)
...
...
@@ -12,10 +12,10 @@ const AnimatingNumbersDemo = () => {
<>
<
div
className
=
"demo"
>
<
h2
>
CountUp-基础用法
</
h2
>
<
AnimatingNumbers
.
CountUp
endNumer
=
"678.94"
/>
<
AnimatingNumbers
.
CountUp
endNum
b
er
=
"678.94"
/>
<
h2
>
CountUp-自定义样式,动态修改数据(需要指定最大位数)
</
h2
>
<
AnimatingNumbers
.
CountUp
endNum
er
=
{
endNum
er
}
endNum
ber
=
{
endNumb
er
}
easeSpeed
=
{
1.2
}
maxLen
=
{
6
}
className
=
"custom-coutup"
...
...
src/packages/animatingnumbers/doc.md
浏览文件 @
09ddbe0c
...
...
@@ -16,14 +16,14 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
### AnimatingNumbers.CountUp-基础用法
```
jsx
<
AnimatingNumbers
.
CountUp
endNumer
=
"678.94"
/>
<
AnimatingNumbers
.
CountUp
endNum
b
er
=
"678.94"
/>
```
### AnimatingNumbers.CountUp-自定义样式,动态修改数据(需要指定最大位数)
```
jsx
const
AnimatingNumbersDemo
=
()
=>
{
const
[
endNumer
,
setEndNumer
]
=
useState
(
'
1570.99
'
)
const
[
endNum
b
er
,
setEndNumer
]
=
useState
(
'
1570.99
'
)
useEffect
(()
=>
{
setInterval
(()
=>
{
setEndNumer
(
`
${
Math
.
floor
(
Math
.
random
()
*
999999
)}
.
${
Math
.
floor
(
Math
.
random
()
*
89
+
10
)}
`
)
...
...
@@ -31,7 +31,7 @@ const AnimatingNumbersDemo = () => {
},
[])
return
(
<
AnimatingNumbers
.
CountUp
endNumer
=
{
endNumer
}
endNumer
=
{
endNum
b
er
}
easeSpeed
=
{
1.2
}
maxLen
=
{
6
}
className
=
"custom-coutup"
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录