Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
39077e2b
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,发现更多精彩内容 >>
未验证
提交
39077e2b
编写于
11月 29, 2021
作者:
_
__Oasis__
提交者:
GitHub
11月 29, 2021
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #841 from irisSong/nutui-react
feat: animatingNumbers组件countUp特效开发完成
上级
da25cdbc
e7d2dd6d
变更
10
显示空白变更内容
内联
并排
Showing
10 changed file
with
243 addition
and
1 deletion
+243
-1
src/config.json
src/config.json
+10
-0
src/packages/animatingnumbers/animatingnumbers.scss
src/packages/animatingnumbers/animatingnumbers.scss
+2
-0
src/packages/animatingnumbers/animatingnumbers.tsx
src/packages/animatingnumbers/animatingnumbers.tsx
+22
-0
src/packages/animatingnumbers/countup.scss
src/packages/animatingnumbers/countup.scss
+36
-0
src/packages/animatingnumbers/countup.tsx
src/packages/animatingnumbers/countup.tsx
+105
-0
src/packages/animatingnumbers/demo.tsx
src/packages/animatingnumbers/demo.tsx
+28
-0
src/packages/animatingnumbers/doc.md
src/packages/animatingnumbers/doc.md
+33
-0
src/packages/animatingnumbers/index.ts
src/packages/animatingnumbers/index.ts
+4
-0
src/packages/nutui.react.ts
src/packages/nutui.react.ts
+2
-0
src/packages/signature/doc.md
src/packages/signature/doc.md
+1
-1
未找到文件。
src/config.json
浏览文件 @
39077e2b
...
...
@@ -432,6 +432,16 @@
"sort"
:
4
,
"show"
:
true
,
"author"
:
"lzz"
},
{
"version"
:
"1.0.0"
,
"name"
:
"AnimatingNumbers"
,
"type"
:
"component"
,
"cName"
:
"数字动画"
,
"desc"
:
"带特效的数字"
,
"sort"
:
7
,
"show"
:
true
,
"author"
:
"songsong"
}
]
},
...
...
src/packages/animatingnumbers/animatingnumbers.scss
0 → 100644
浏览文件 @
39077e2b
.nut-animatingnumbers
{
}
src/packages/animatingnumbers/animatingnumbers.tsx
0 → 100644
浏览文件 @
39077e2b
import
React
,
{
FunctionComponent
,
Component
}
from
'
react
'
import
'
./animatingnumbers.scss
'
import
{
CountUp
}
from
'
./countup
'
export
interface
AnimatingNumbersProps
{}
const
defaultProps
=
{}
as
AnimatingNumbersProps
type
AnimatingNumbersStates
=
{}
export
class
AnimatingNumbers
extends
Component
<
AnimatingNumbersProps
,
AnimatingNumbersStates
>
{
static
defaultProps
=
defaultProps
static
displayName
=
'
NutAnimatingNumbers
'
static
CountUp
=
CountUp
constructor
(
props
:
AnimatingNumbersProps
)
{
super
(
props
)
this
.
state
=
{}
}
render
()
{
return
<
div
className
=
"nut-animatingnumbers"
></
div
>
}
}
src/packages/animatingnumbers/countup.scss
0 → 100644
浏览文件 @
39077e2b
.nut-countup
{
&
__list
{
display
:
inline-flex
;
height
:
32px
;
overflow
:
hidden
;
}
&
__listitem
{
height
:
32px
;
overflow
:
hidden
;
font-size
:
18px
;
color
:
#000
;
font-weight
:
bold
;
}
&
__number
,
&
__separator
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
span
{
height
:
32px
;
line-height
:
32px
;
}
}
}
// 自定义样式
.custom-coutup
{
.nut-countup__listitem--number
{
margin
:
0
1px
;
border-radius
:
4px
;
color
:
#fff
;
background-color
:
#031f63
;
}
.nut-countup__number
{
width
:
24px
;
}
}
src/packages/animatingnumbers/countup.tsx
0 → 100644
浏览文件 @
39077e2b
import
React
,
{
CSSProperties
,
FunctionComponent
,
useEffect
,
useRef
,
useState
}
from
'
react
'
import
'
./countup.scss
'
import
bem
from
'
@/utils/bem
'
export
interface
CountUpProps
{
maxLen
:
number
endNumer
:
string
delaySpeed
?:
number
easeSpeed
:
number
thousands
:
boolean
className
:
string
style
:
React
.
CSSProperties
}
const
defaultProps
=
{
maxLen
:
0
,
endNumer
:
''
,
delaySpeed
:
300
,
easeSpeed
:
1
,
thousands
:
false
,
className
:
''
,
}
as
CountUpProps
export
const
CountUp
:
FunctionComponent
<
Partial
<
CountUpProps
>>
=
(
props
)
=>
{
const
{
maxLen
,
endNumer
,
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
getShowNumber
=
()
=>
{
const
splitArr
=
endNumer
.
split
(
'
.
'
)
const
intNumber
=
maxLen
&&
splitArr
[
0
].
length
<
maxLen
?
(
Array
(
maxLen
).
join
(
'
0
'
)
+
splitArr
[
0
]).
slice
(
-
maxLen
)
:
splitArr
[
0
]
const
currNumber
=
`
${
thousands
?
intNumber
.
replace
(
/
(\d)(?=(?:\d{3})
+$
)
/g
,
'
$1,
'
)
:
intNumber
}${
splitArr
[
1
]
?
'
.
'
:
''
}${
splitArr
[
1
]
||
''
}
`
return
currNumber
.
split
(
''
)
}
const
numerArr
=
getShowNumber
()
const
setNumberTransform
=
()
=>
{
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
))
{
const
elem
=
numberItems
[
Number
(
index
)]
as
HTMLElement
const
idx
=
Number
(
numberFilterArr
[
Number
(
index
)])
if
((
idx
||
idx
==
0
)
&&
elem
)
{
const
transform
=
`translate(0, -
${(
idx
==
0
?
10
:
idx
)
*
5
}
%)`
elem
.
style
.
transform
=
transform
elem
.
style
.
webkitTransform
=
transform
}
}
}
}
const
numberEaseStyle
:
CSSProperties
=
{
transition
:
`transform
${
easeSpeed
}
s ease-in-out`
,
}
useEffect
(()
=>
{
timerRef
.
current
=
window
.
setTimeout
(()
=>
{
setNumberTransform
()
},
delaySpeed
)
return
()
=>
{
window
.
clearTimeout
(
timerRef
.
current
)
}
},
[])
useEffect
(()
=>
{
setNumberTransform
()
},
[
numerArr
])
return
(
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
ref
=
{
countupRef
}
>
<
ul
className
=
{
b
(
'
list
'
)
}
>
{
numerArr
.
map
((
item
:
any
,
idx
:
number
)
=>
{
return
(
<
li
className
=
{
`
${
b
(
'
listitem
'
,
{
number
:
!
isNaN
(
item
)
?
true
:
false
})}
`
}
key
=
{
idx
}
>
{
!
isNaN
(
item
)
?
(
<
span
className
=
{
b
(
'
number
'
)
}
style
=
{
numberEaseStyle
}
>
{
[...
numbers
,
...
numbers
].
map
((
number
,
subidx
)
=>
{
return
<
span
key
=
{
subidx
}
>
{
number
}
</
span
>
})
}
</
span
>
)
:
(
<
span
className
=
{
b
(
'
separator
'
)
}
>
{
item
}
</
span
>
)
}
</
li
>
)
})
}
</
ul
>
</
div
>
)
}
CountUp
.
defaultProps
=
defaultProps
CountUp
.
displayName
=
'
NutCountUp
'
src/packages/animatingnumbers/demo.tsx
0 → 100644
浏览文件 @
39077e2b
import
React
,
{
useEffect
,
useState
}
from
'
react
'
import
{
AnimatingNumbers
}
from
'
./animatingnumbers
'
const
AnimatingNumbersDemo
=
()
=>
{
const
[
endNumer
,
setEndNumer
]
=
useState
(
'
1570.99
'
)
useEffect
(()
=>
{
setInterval
(()
=>
{
setEndNumer
(
`
${
Math
.
floor
(
Math
.
random
()
*
999999
)}
.
${
Math
.
floor
(
Math
.
random
()
*
89
+
10
)}
`
)
},
30000
)
},
[])
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
CountUp-基础用法
</
h2
>
<
AnimatingNumbers
.
CountUp
endNumer
=
"678.94"
/>
<
h2
>
CountUp-自定义样式,动态修改数据(需要指定最大位数)
</
h2
>
<
AnimatingNumbers
.
CountUp
endNumer
=
{
endNumer
}
easeSpeed
=
{
1.2
}
maxLen
=
{
6
}
className
=
"custom-coutup"
/>
</
div
>
</>
)
}
export
default
AnimatingNumbersDemo
src/packages/animatingnumbers/doc.md
0 → 100644
浏览文件 @
39077e2b
# AnimatingNumbers组件
### 介绍
基于 xxxxxxx
### 安装
## 代码演示
### 基础用法1
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| name | 图标名称或图片链接 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小,如 '20px' '2em' '2rem' | String | - |
| class-prefix | 类名前缀,用于使用自定义图标 | String | 'nutui-iconfont' |
| tag | HTML 标签 | String | 'i' |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| click | 点击图标时触发 | event: Event |
src/packages/animatingnumbers/index.ts
0 → 100644
浏览文件 @
39077e2b
import
{
AnimatingNumbers
}
from
'
./animatingnumbers
'
import
{
CountUp
}
from
'
./countup
'
AnimatingNumbers
.
CountUp
=
CountUp
export
default
AnimatingNumbers
src/packages/nutui.react.ts
浏览文件 @
39077e2b
...
...
@@ -27,6 +27,7 @@ import Uploader from './uploader'
import
Input
from
'
./input
'
import
TextArea
from
'
./textarea
'
import
CheckBox
from
'
./checkbox
'
import
AnimatingNumbers
from
'
./animatingnumbers
'
import
Tag
from
'
./tag
'
import
Badge
from
'
./badge
'
import
Signature
from
'
./signature
'
...
...
@@ -61,6 +62,7 @@ export {
Input
,
TextArea
,
CheckBox
,
AnimatingNumbers
,
Tag
,
Badge
,
Signature
,
...
...
src/packages/signature/doc.md
浏览文件 @
39077e2b
...
...
@@ -23,7 +23,7 @@ const clear = () => {
img
.
remove
()
}
}
Signature
confirm
=
{
confirm
}
clear
=
{
clear
}
>
<
/
Signature
>
<
Signature
confirm
=
{
confirm
}
clear
=
{
clear
}
></
Signature
>
<
p
className
=
"demo-tips demo1"
style
=
{
demoStyles
}
>
Tips: 点击确认按钮,下方显示签名图片
</
p
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录