Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
74581570
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,发现更多精彩内容 >>
提交
74581570
编写于
1月 12, 2022
作者:
S
songchenglin3
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'upstream/main'
上级
4a007dfb
516df9ee
变更
14
展开全部
隐藏空白更改
内联
并排
Showing
14 changed file
with
1468 addition
and
620 deletion
+1468
-620
src/packages/address/doc.md
src/packages/address/doc.md
+433
-333
src/packages/avatar/doc.md
src/packages/avatar/doc.md
+83
-12
src/packages/barrage/barrage.tsx
src/packages/barrage/barrage.tsx
+1
-0
src/packages/barrage/doc.md
src/packages/barrage/doc.md
+32
-18
src/packages/circleprogress/doc.md
src/packages/circleprogress/doc.md
+101
-27
src/packages/infiniteloading/doc.md
src/packages/infiniteloading/doc.md
+214
-128
src/packages/inputnumber/demo.tsx
src/packages/inputnumber/demo.tsx
+1
-1
src/packages/inputnumber/doc.md
src/packages/inputnumber/doc.md
+181
-29
src/packages/overlay/doc.md
src/packages/overlay/doc.md
+64
-7
src/packages/steps/demo.tsx
src/packages/steps/demo.tsx
+1
-1
src/packages/steps/doc.md
src/packages/steps/doc.md
+200
-31
src/packages/uploader/doc.md
src/packages/uploader/doc.md
+155
-31
src/sites/doc/components/demoblock/basedUtil.ts
src/sites/doc/components/demoblock/basedUtil.ts
+1
-1
src/sites/doc/components/demoblock/demoblock.tsx
src/sites/doc/components/demoblock/demoblock.tsx
+1
-1
未找到文件。
src/packages/address/doc.md
浏览文件 @
74581570
此差异已折叠。
点击以展开。
src/packages/avatar/doc.md
浏览文件 @
74581570
...
...
@@ -5,7 +5,7 @@
用来代表用户或事物,支持图片、图标或字符展示。
### 安装
```
javascript
```
ts
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -15,38 +15,109 @@ import { Avatar } from '@nutui/nutui-react';
内置 smal / normal / large 三种尺寸规格
:::demo
```
tsx
<
Avatar
size
=
"large"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
<
Avatar
size
=
"normal"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
<
Avatar
size
=
"small"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Avatar
size
=
"large"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
<
Avatar
size
=
"normal"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
<
Avatar
size
=
"small"
src
=
"https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></
Avatar
>
</>
)
}
export
default
App
;
```
### 修改形状类型
```
tsx
<
Avatar
shape
=
"square"
></
Avatar
>
<
Avatar
shape
=
"round"
></
Avatar
>
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Avatar
icon
=
"my"
shape
=
"square"
></
Avatar
>
<
Avatar
icon
=
"my"
shape
=
"round"
></
Avatar
>
</>
)
}
export
default
App
;
```
### 修改背景色
```
tsx
<
Avatar
bg
-
color
=
"#f0250f"
></
Avatar
>
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
styles
=
{
color
:
"
#fff
"
}
const
App
=
()
=>
{
return
(
<>
<
Avatar
className
=
"demo-avatar"
bgColor
=
"#FA2C19"
icon
=
"my"
style
=
{
styles
}
></
Avatar
>
</>
)
}
export
default
App
;
```
### 修改背景icon
```
tsx
<
Avatar
icon
=
"https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
></
Avatar
>
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Avatar
icon
=
"https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
></
Avatar
>
</>
)
}
export
default
App
;
```
### 设置头像的文本内容
```
tsx
<
Avatar
icon
>
N
</
Avatar
>
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Avatar
icon
=
""
>
N
</
Avatar
>
</>
)
}
export
default
App
;
```
### 点击头像触发事件
```
tsx
import
React
from
"
react
"
;
import
{
Avatar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
handleClick
=
()
=>
{
console
.
log
(
'
触发点击头像
'
)
}
return
(
<>
<
Avatar
icon
=
"my"
onClick
=
{
handleClick
}
></
Avatar
>
</>
)
}
export
default
App
;
```
...
...
src/packages/barrage/barrage.tsx
浏览文件 @
74581570
...
...
@@ -68,6 +68,7 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
const
width
=
el
.
offsetWidth
const
height
=
el
.
offsetHeight
console
.
log
(
el
.
offsetWidth
,
el
.
offsetHeight
)
el
.
classList
.
add
(
'
move
'
)
el
.
style
.
animationDuration
=
`
${
speeds
}
ms`
el
.
style
.
top
=
(
_index
%
rows
)
*
(
height
+
top
)
+
20
+
'
px
'
...
...
src/packages/barrage/doc.md
浏览文件 @
74581570
...
...
@@ -6,37 +6,51 @@
### 安装
```
javascript
```
ts
import
{
Barrage
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
1
### 基础用法
:::demo
```
tsx
<
h2
>
基础用法
</
h2
>
<
Cell
>
<
Barrage
ref
=
{
barrageRef
}
barrageList
=
{
list
}
></
Barrage
>
</
Cell
>
<
div
className
=
"test"
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
addBarrage
}
>
随机添加
</
Button
>
</
div
>
```
import
React
,
{
useRef
}
from
"
react
"
;
import
{
Cell
,
Button
,
Barrage
}
from
'
@nutui/nutui-react
'
;
```
tsx
let
list
=
[
'
画美不看
'
,
'
不明觉厉
'
,
'
喜大普奔
'
,
'
男默女泪
'
,
'
累觉不爱
'
,
'
爷青结-
'
]
const
barrageRef
=
useRef
(
null
)
const
addBarrage
=
()
=>
{
let
n
=
Math
.
random
()
if
(
barrageRef
.
current
)
{
barrageRef
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
const
barrageStyle
=
{
padding
:
'
20px 0
'
,
height
:
'
150px
'
,
boxSizing
:
'
border-box
'
}
const
App
=
()
=>
{
let
list
=
[
'
画美不看
'
,
'
不明觉厉
'
,
'
喜大普奔
'
,
'
男默女泪
'
,
'
累觉不爱
'
,
'
爷青结-
'
]
const
barrageRef
=
useRef
(
null
)
const
addBarrage
=
()
=>
{
let
n
=
Math
.
random
()
if
(
barrageRef
.
current
)
{
barrageRef
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
}
}
return
(
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
Cell
className
=
{
'
barrage-demo-wrap
'
}
style
=
{
barrageStyle
}
>
<
Barrage
className
=
{
'
barrage-demo
'
}
ref
=
{
barrageRef
}
barrageList
=
{
list
}
style
=
{
barrageStyle
}
></
Barrage
>
</
Cell
>
<
div
className
=
"test"
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
addBarrage
}
>
随机添加
</
Button
>
</
div
>
</
div
>
)
}
export
default
App
;
```
## API
### Props
...
...
src/packages/circleprogress/doc.md
浏览文件 @
74581570
...
...
@@ -6,7 +6,7 @@
### 安装
```
javascript
```
ts
import
{
CirecleProgress
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -14,54 +14,128 @@ import { CirecleProgress } from '@nutui/nutui-react';
### 基础用法
:::demo
```
tsx
<
CircleProgress
progress
=
{
10
}
></
CircleProgress
>
import
React
from
"
react
"
;
import
{
CircleProgress
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
CircleProgress
progress
=
{
10
}
></
CircleProgress
>
</>
)
}
export
default
App
;
```
### 环形进度条自定义样式
```
tsx
<
CircleProgress
progress
=
{
50
}
progressOption
=
{
progressOption
}
></
CircleProgress
>
import
React
from
"
react
"
;
import
{
CircleProgress
}
from
'
@nutui/nutui-react
'
;
const
progressOption
=
{
radius
:
50
,
strokeOutWidth
:
10
,
backColor
:
'
#d9d9d9
'
,
progressColor
:
'
red
'
,
}
const
App
=
()
=>
{
return
(
<>
<
CircleProgress
progress
=
{
50
}
progressOption
=
{
progressOption
}
></
CircleProgress
>
</>
)
}
export
default
App
;
```
### 环形进度条自定义内容
```
tsx
<
CircleProgress
progress
=
{
50
}
isAuto
=
{
true
}
>
<
div
>
自定义
</
div
>
</
CircleProgress
>
import
React
from
"
react
"
;
import
{
CircleProgress
}
from
'
@nutui/nutui-react
'
;
const
progressOption
=
{
radius
:
50
,
strokeOutWidth
:
10
,
backColor
:
'
#d9d9d9
'
,
progressColor
:
'
red
'
,
}
const
App
=
()
=>
{
return
(
<>
<
CircleProgress
progress
=
{
50
}
isAuto
=
{
true
}
>
<
div
>
自定义
</
div
>
</
CircleProgress
>
</>
)
}
export
default
App
;
```
### 动态改变环形进度条的进度
```
tsx
<
CircleProgress
progress
=
{
percent
}
progressOption
=
{
progressOption
}
strokeInnerWidth
=
{
strokeInnerWidth
}
></
CircleProgress
>
```
```
tsx
const
[
percent
,
setPercent
]
=
useState
(
50
)
const
[
strokeInnerWidth
,
setStrokeInnerWidth
]
=
useState
(
10
)
import
React
,
{
useState
}
from
"
react
"
;
import
{
Button
,
CircleProgress
}
from
'
@nutui/nutui-react
'
;
const
progressOption
=
{
radius
:
50
,
strokeOutWidth
:
10
,
backColor
:
'
#d9d9d9
'
,
progressColor
:
'
red
'
,
}
const
setReduceVal
=
()
=>
{
if
(
percent
-
10
<=
0
)
{
setStrokeInnerWidth
(
0
)
setPercent
(
0
)
return
}
setPercent
(
percent
-
10
)
const
demoBtnStyle
=
{
textAlign
:
'
center
'
,
width
:
'
100%
'
,
height
:
'
50px
'
,
borderTop
:
'
1px solid rgba(234, 240, 251, 1)
'
,
paddingTop
:
'
6px
'
,
background
:
'
rgba(255, 255, 255, 1)
'
}
const
demoPieceStyle
=
{
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
background
:
'
rgba(255, 255, 255, 1)
'
}
const
setAddVal
=
()
=>
{
setStrokeInnerWidth
(
10
)
if
(
percent
>=
100
)
{
return
const
App
=
()
=>
{
const
[
percent
,
setPercent
]
=
useState
(
50
)
const
[
strokeInnerWidth
,
setStrokeInnerWidth
]
=
useState
(
10
)
const
setReduceVal
=
()
=>
{
if
(
percent
-
10
<=
0
)
{
setStrokeInnerWidth
(
0
)
setPercent
(
0
)
return
}
setPercent
(
percent
-
10
)
}
const
setAddVal
=
()
=>
{
setStrokeInnerWidth
(
10
)
if
(
percent
>=
100
)
{
return
}
setPercent
(
percent
+
10
)
}
setPercent
(
percent
+
10
)
return
(
<>
<
div
className
=
"demo__piece"
style
=
{
demoPieceStyle
}
>
<
CircleProgress
progress
=
{
percent
}
progressOption
=
{
progressOption
}
strokeInnerWidth
=
{
strokeInnerWidth
}
></
CircleProgress
>
</
div
>
<
div
className
=
"demo__btn"
style
=
{
demoBtnStyle
}
>
<
Button
type
=
"primary"
onClick
=
{
setReduceVal
}
style
=
{
{
marginRight
:
'
10px
'
}
}
>
减少
</
Button
>
<
Button
type
=
"primary"
onClick
=
{
setAddVal
}
>
增加
</
Button
>
</
div
>
</>
)
}
export
default
App
;
```
...
...
src/packages/infiniteloading/doc.md
浏览文件 @
74581570
...
...
@@ -6,168 +6,254 @@
### 安装
```
javascript
import
{
InfiniteLoading
}
from
'
@nutui/nutui-react
'
;
```
ts
import
{
InfiniteLoading
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
:::demo
```
tsx
<
ul
className
=
"infiniteUl"
id
=
"scroll"
>
<
Infiniteloading
containerId
=
"scroll"
useWindow
=
{
false
}
hasMore
=
{
hasMore
}
loadMore
=
{
loadMore
}
>
{
defultList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
```
```
tsx
const
[
defultList
,
setDefultList
]
=
useState
<
string
[]
>
([])
const
[
hasMore
,
setHasMore
]
=
useState
(
true
)
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Cell
,
Infiniteloading
}
from
'
@nutui/nutui-react
'
;
useEffect
(()
=>
{
init
()
},
[])
const
InfiniteUlStyle
=
{
height
:
'
300px
'
,
width
:
'
100%
'
,
padding
:
'
0
'
,
overflowY
:
'
auto
'
,
overflowX
:
'
hidden
'
}
const
loadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
defultList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
defultList
.
push
(
`
${
i
}
`
)
}
if
(
defultList
.
length
>=
30
)
{
setHasMore
(
false
)
}
else
{
setDefultList
([...
defultList
])
}
done
()
},
500
)
const
InfiniteLiStyle
=
{
marginTop
:
'
10px
'
,
fontSize
:
'
14px
'
,
color
:
'
rgba(100, 100, 100, 1)
'
,
textAlign
:
'
center
'
}
const
App
=
()
=>
{
const
[
defultList
,
setDefultList
]
=
useState
<
string
[]
>
([])
const
[
hasMore
,
setHasMore
]
=
useState
(
true
)
useEffect
(()
=>
{
init
()
},
[])
const
loadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
defultList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
defultList
.
push
(
`
${
i
}
`
)
}
if
(
defultList
.
length
>=
30
)
{
setHasMore
(
false
)
}
else
{
setDefultList
([...
defultList
])
}
done
()
},
500
)
}
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
defultList
.
push
(
`
${
i
}
`
)
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
defultList
.
push
(
`
${
i
}
`
)
}
setDefultList
([...
defultList
])
}
setDefultList
([...
defultList
])
return
(
<>
<
h2
>
基础用法
</
h2
>
<
Cell
>
<
ul
className
=
"infiniteUl"
id
=
"scroll"
style
=
{
InfiniteUlStyle
}
>
<
Infiniteloading
containerId
=
"scroll"
useWindow
=
{
false
}
hasMore
=
{
hasMore
}
loadMore
=
{
loadMore
}
>
{
defultList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
style
=
{
InfiniteLiStyle
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
</
Cell
>
</>
)
}
export
default
App
;
```
### 下拉刷新
```
tsx
<
ul
className
=
"infiniteUl"
id
=
"refreshScroll"
>
<
Infiniteloading
pullIcon
=
"JD"
containerId
=
"refreshScroll"
useWindow
=
{
false
}
isOpenRefresh
=
{
true
}
hasMore
=
{
refreshHasMore
}
loadMore
=
{
refreshLoadMore
}
refresh
=
{
refresh
}
>
{
refreshList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
```
```
tsx
const
[
refreshList
,
setRefreshList
]
=
useState
<
string
[]
>
([])
const
[
refreshHasMore
,
setRefreshHasMore
]
=
useState
(
true
)
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Cell
,
Infiniteloading
}
from
'
@nutui/nutui-react
'
;
const
InfiniteUlStyle
=
{
height
:
'
300px
'
,
width
:
'
100%
'
,
padding
:
'
0
'
,
overflowY
:
'
auto
'
,
overflowX
:
'
hidden
'
}
const
InfiniteLiStyle
=
{
marginTop
:
'
10px
'
,
fontSize
:
'
14px
'
,
color
:
'
rgba(100, 100, 100, 1)
'
,
textAlign
:
'
center
'
}
const
App
=
()
=>
{
const
[
refreshList
,
setRefreshList
]
=
useState
<
string
[]
>
([])
const
[
refreshHasMore
,
setRefreshHasMore
]
=
useState
(
true
)
useEffect
(()
=>
{
init
()
},
[])
useEffect
(()
=>
{
init
()
},
[])
const
refreshLoadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
refreshList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
refreshList
.
push
(
`
${
i
}
`
)
}
if
(
refreshList
.
length
>=
30
)
{
setRefreshHasMore
(
false
)
}
else
{
setRefreshList
([...
refreshList
])
}
done
()
},
500
)
}
setRefreshList
([...
refreshList
])
}
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
refreshList
.
push
(
`
${
i
}
`
)
const
refreshLoadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
refreshList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
refreshList
.
push
(
`
${
i
}
`
)
}
if
(
refreshList
.
length
>=
30
)
{
setRefreshHasMore
(
false
)
}
else
{
setRefreshList
([...
refreshList
])
}
done
()
},
500
)
}
setRefreshList
([...
refreshList
])
const
refresh
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
Toast
.
text
(
'
刷新成功
'
)
done
()
},
1000
)
}
return
(
<>
<
h2
>
下拉刷新
</
h2
>
<
Cell
>
<
ul
className
=
"infiniteUl"
id
=
"refreshScroll"
style
=
{
InfiniteUlStyle
}
>
<
Infiniteloading
pullIcon
=
"JD"
containerId
=
"refreshScroll"
useWindow
=
{
false
}
isOpenRefresh
=
{
true
}
hasMore
=
{
refreshHasMore
}
loadMore
=
{
refreshLoadMore
}
refresh
=
{
refresh
}
>
{
refreshList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
style
=
{
InfiniteLiStyle
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
</
Cell
>
</>
)
}
export
default
App
;
```
### 自定义加载文案
```
tsx
<
ul
className
=
"infiniteUl"
id
=
"scroll"
>
<
Infiniteloading
containerId
=
"customScroll"
useWindow
=
{
false
}
loadTxt
=
"loading"
loadMoreTxt
=
"没有啦~"
hasMore
=
{
customHasMore
}
loadMore
=
{
customLoadMore
}
>
{
customList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
```
```
tsx
const
[
customList
,
setCustomList
]
=
useState
<
string
[]
>
([])
const
[
customHasMore
,
setCustomHasMore
]
=
useState
(
true
)
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
Cell
,
Infiniteloading
}
from
'
@nutui/nutui-react
'
;
useEffect
(()
=>
{
init
()
},
[])
const
InfiniteUlStyle
=
{
height
:
'
300px
'
,
width
:
'
100%
'
,
padding
:
'
0
'
,
overflowY
:
'
auto
'
,
overflowX
:
'
hidden
'
}
const
InfiniteLiStyle
=
{
marginTop
:
'
10px
'
,
fontSize
:
'
14px
'
,
color
:
'
rgba(100, 100, 100, 1)
'
,
textAlign
:
'
center
'
}
const
App
=
()
=>
{
const
[
customList
,
setCustomList
]
=
useState
<
string
[]
>
([])
const
[
customHasMore
,
setCustomHasMore
]
=
useState
(
true
)
const
customLoadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
customList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
useEffect
(()
=>
{
init
()
},
[])
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
customList
.
push
(
`
${
i
}
`
)
}
if
(
customList
.
length
>=
30
)
{
setCustomHasMore
(
false
)
}
else
{
setCustomList
([...
customList
])
}
done
()
},
500
)
}
setCustomList
([...
customList
])
}
const
init
=
()
=>
{
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
customList
.
push
(
`
${
i
}
`
)
const
customLoadMore
=
(
done
:
()
=>
void
)
=>
{
setTimeout
(()
=>
{
const
curLen
=
customList
.
length
for
(
let
i
=
curLen
;
i
<
curLen
+
10
;
i
++
)
{
customList
.
push
(
`
${
i
}
`
)
}
if
(
customList
.
length
>=
30
)
{
setCustomHasMore
(
false
)
}
else
{
setCustomList
([...
customList
])
}
done
()
},
500
)
}
setCustomList
([...
customList
])
return
(
<>
<
h2
>
自定义加载文案
</
h2
>
<
Cell
>
<
ul
className
=
"infiniteUl"
id
=
"customScroll"
style
=
{
InfiniteUlStyle
}
>
<
Infiniteloading
containerId
=
"customScroll"
useWindow
=
{
false
}
loadTxt
=
"loading"
loadMoreTxt
=
"没有啦~"
hasMore
=
{
customHasMore
}
loadMore
=
{
customLoadMore
}
>
{
customList
.
map
((
item
,
index
)
=>
{
return
(
<
li
className
=
"infiniteLi"
key
=
{
index
}
style
=
{
InfiniteLiStyle
}
>
{
item
}
</
li
>
)
})
}
</
Infiniteloading
>
</
ul
>
</
Cell
>
</>
)
}
export
default
App
;
```
## API
### Props
...
...
@@ -181,9 +267,9 @@ const init = () => {
| containerId | 在 useWindow 属性为 false 的时候,自定义设置节点ID | String |
`''`
|
| loadMoreTxt | “没有更多数”据展示文案 | String |
`'哎呀,这里是底部了啦'`
|
| isOpenRefresh | 是否开启下拉刷新 | Boolean |
`false`
|
| pullIcon | 下拉刷新
[
图标名称
](
#/icon
)
| String |
<img
src=
"https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
width=
40/
>
|
| pullIcon | 下拉刷新
[
图标名称
](
#/icon
)
| String |
''
|
| pullTxt | 下拉刷新提示文案 | String |
`松手刷新`
|
| loadIcon | 上拉加载
[
图标名称
](
#/icon
)
|
Boolean |
<img
src=
"https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
width=
40
/>
|
| loadIcon | 上拉加载
[
图标名称
](
#/icon
)
|
String | ''
|
| loadTxt | 上拉加载提示文案 | String |
`加载中...`
|
### Events
...
...
src/packages/inputnumber/demo.tsx
浏览文件 @
74581570
...
...
@@ -59,7 +59,7 @@ const InputNumberDemo = () => {
<
Cell
>
<
InputNumber
modelValue
=
{
inputState
.
val5
}
readonly
/>
</
Cell
>
<
h2
>
支持小数
</
h2
>
<
h2
>
支持小数
点
</
h2
>
<
Cell
>
<
InputNumber
modelValue
=
{
inputState
.
val6
}
step
=
"0.1"
decimalPlaces
=
"1"
readonly
/>
</
Cell
>
...
...
src/packages/inputnumber/doc.md
浏览文件 @
74581570
...
...
@@ -6,7 +6,7 @@
### 安装
```
javascript
```
ts
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -16,13 +16,29 @@ import { InputNumber } from '@nutui/nutui-react';
初始化一个默认值
:::demo
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val1
}
/>
```
```
tsx
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
})
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val1
}
/>
</>
)
}
export
default
App
;
```
### 步长设置
...
...
@@ -30,7 +46,27 @@ const [inputState, setInputState] = useState({
设置步长
`step`
5
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val2
}
step
=
"5"
/>
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val2
}
step
=
"5"
/>
</>
)
}
export
default
App
;
```
### 限制输入范围
...
...
@@ -38,13 +74,31 @@ const [inputState, setInputState] = useState({
`min`
和
`max`
属性分别表示最小值和最大值
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val3
}
min
=
"10"
max
=
"20"
overlimit
=
{
overlimit
}
/>
```
```
tsx
const
overlimit
=
(
e
:
MouseEvent
)
=>
{
console
.
log
(
e
)
Toast
.
warn
(
'
超出限制事件触发
'
)
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
const
overlimit
=
(
e
:
MouseEvent
)
=>
{
console
.
log
(
e
)
Toast
.
warn
(
'
超出限制事件触发
'
)
}
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val3
}
min
=
"10"
max
=
"20"
overlimit
=
{
overlimit
}
/>
</>
)
}
export
default
App
;
```
### 禁用状态
...
...
@@ -52,7 +106,27 @@ const overlimit = (e: MouseEvent) => {
`disabled`
禁用状态下无法点击按钮或修改输入框。
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val4
}
disabled
/>
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val4
}
disabled
/>
</>
)
}
export
default
App
;
```
### 只读禁用输入框
...
...
@@ -60,7 +134,27 @@ const overlimit = (e: MouseEvent) => {
`readonly`
设置只读禁用输入框输入行为
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val5
}
readonly
/>
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val5
}
readonly
/>
</>
)
}
export
default
App
;
```
### 支持小数点
...
...
@@ -68,32 +162,90 @@ const overlimit = (e: MouseEvent) => {
设置步长
`step`
0.1
`decimal-places`
小数保留1位
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val6
}
step
=
"0.1"
decimalPlaces
=
"1"
readonly
/>
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val6
}
step
=
"0.1"
decimalPlaces
=
"1"
readonly
/>
</>
)
}
export
default
App
;
```
### 支持异步修改
通过
`change`
事件和
`model-value`
进行异步修改
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val7
}
change
=
{
onChange
}
isAsync
=
{
true
}
/>
```
```
tsx
const
onChange
=
(
value
:
string
|
number
)
=>
{
Toast
.
loading
(
'
异步演示 2 秒后更改
'
)
setTimeout
(()
=>
{
inputState
.
val7
=
Number
(
value
)
setInputState
({
...
inputState
})
Toast
.
hide
()
},
2000
)
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
const
onChange
=
(
value
:
string
|
number
)
=>
{
Toast
.
loading
(
'
异步演示 2 秒后更改
'
)
setTimeout
(()
=>
{
inputState
.
val7
=
Number
(
value
)
setInputState
({
...
inputState
})
Toast
.
hide
()
},
2000
)
}
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val7
}
change
=
{
onChange
}
isAsync
=
{
true
}
/>
</>
)
}
export
default
App
;
```
### 自定义按钮大小
设置步长
`step`
0.1
`decimal-places`
小数保留1位
```
tsx
<
InputNumber
modelValue
=
{
inputState
.
val8
}
buttonSize
=
"30"
inputWidth
=
"50"
/>
import
React
,
{
useState
}
from
"
react
"
;
import
{
InputNumber
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
inputState
,
setInputState
]
=
useState
({
val1
:
1
,
val2
:
0
,
val3
:
10
,
val4
:
0
,
val5
:
1
,
val6
:
5.5
,
val7
:
1
,
val8
:
1
,
})
return
(
<>
<
InputNumber
modelValue
=
{
inputState
.
val8
}
buttonSize
=
"30"
inputWidth
=
"50"
/>
</>
)
}
export
default
App
;
```
## API
...
...
src/packages/overlay/doc.md
浏览文件 @
74581570
...
...
@@ -7,7 +7,7 @@
### 安装
```
javascript
```
ts
import
{
OverLay
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -15,18 +15,75 @@ import { OverLay } from '@nutui/nutui-react';
### 基础用法
:::demo
```
tsx
<
Overlay
visible
=
{
true
}
zindex
=
{
2000
}
></
Overlay
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Button
,
Overlay
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
handleToggleShow
=
()
=>
{
setVisible
(
true
)
}
const
onClose
=
()
=>
{
setVisible
(
false
)
}
return
(
<>
<
Button
type
=
"primary"
onClick
=
{
handleToggleShow
}
>
显示遮罩层
</
Button
>
<
Overlay
visible
=
{
visible
}
onClick
=
{
onClose
}
></
Overlay
>
</>
)
}
export
default
App
;
```
### 嵌套内容
```
tsx
<
nut
-
overlay
visible
=
{
true
}
zIndex
=
{
2000
}
>
<
div
className
=
"wrapper"
>
<
div
className
=
"content"
>
这里是正文
</
div
>
</
div
>
</
nut
-
overlay
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Button
,
Overlay
}
from
'
@nutui/nutui-react
'
;
const
WrapperStyle
=
{
display
:
'
flex
'
,
height
:
'
100%
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
}
const
ContentStyle
=
{
display
:
'
flex
'
,
width
:
'
150px
'
,
height
:
'
150px
'
,
background
:
'
#fff
'
,
borderRadius
:
'
8px
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
,
color
:
'
red
'
}
const
App
=
()
=>
{
const
[
visible2
,
setVisible2
]
=
useState
(
false
)
const
handleToggleShow2
=
()
=>
{
setVisible2
(
true
)
}
const
onClose2
=
()
=>
{
setVisible2
(
false
)
}
return
(
<>
<
Button
type
=
"success"
onClick
=
{
handleToggleShow2
}
>
嵌套内容
</
Button
>
<
Overlay
visible
=
{
visible2
}
onClick
=
{
onClose2
}
>
<
div
className
=
"wrapper"
style
=
{
WrapperStyle
}
>
<
div
className
=
"content"
style
=
{
ContentStyle
}
>
这里是正文
</
div
>
</
div
>
</
Overlay
>
</>
)
}
export
default
App
;
```
## API
...
...
src/packages/steps/demo.tsx
浏览文件 @
74581570
...
...
@@ -90,7 +90,7 @@ const StepsDemo = () => {
</
Step
>
</
Steps
>
</
div
>
<
h2
>
竖向步骤条
</
h2
>
<
h2
>
点状步骤和垂直方向
</
h2
>
<
div
className
=
"steps-wrapper"
style
=
{
{
height
:
'
300px
'
,
padding
:
'
15px 40px
'
}
}
>
<
Steps
direction
=
"vertical"
progressDot
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
content
=
"您的订单已经打包完成,商品已发出"
>
...
...
src/packages/steps/doc.md
浏览文件 @
74581570
...
...
@@ -6,7 +6,7 @@
### 安装
```
javascript
```
ts
import
{
Steps
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -14,56 +14,225 @@ import { Steps } from '@nutui/nutui-react';
### 基本用法
:::demo
```
tsx
<
Steps
current
=
{
1
}
>
<
Step
activeIndex
=
{
1
}
title
=
"步骤一"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"步骤二"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"步骤三"
>
3
</
Step
>
</
Steps
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Steps
,
Step
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
stepState
,
setStepState
]
=
useState
<
any
>
({
current1
:
1
,
current2
:
1
,
current3
:
1
,
current4
:
1
,
current5
:
1
,
})
const
handleStep
=
(
params
:
string
)
=>
{
if
(
stepState
[
params
]
>=
3
)
{
stepState
[
params
]
=
1
setStepState
({
...
stepState
})
}
else
{
stepState
[
params
]
+=
1
setStepState
({
...
stepState
})
}
}
return
(
<>
<
Steps
current
=
{
stepState
.
current1
}
>
<
Step
activeIndex
=
{
1
}
title
=
"步骤一"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"步骤二"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"步骤三"
>
3
</
Step
>
</
Steps
>
<
div
className
=
"steps-button"
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
()
=>
handleStep
(
'
current1
'
)
}
>
下一步
</
Button
>
</
div
>
</>
)
}
export
default
App
;
```
### 标题和描述信息
```
tsx
<
Steps
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"步骤一"
content
=
"步骤描述"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"步骤二"
content
=
"步骤描述"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"步骤三"
content
=
"步骤描述"
>
3
</
Step
>
</
Steps
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Steps
,
Step
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
stepState
,
setStepState
]
=
useState
<
any
>
({
current1
:
1
,
current2
:
1
,
current3
:
1
,
current4
:
1
,
current5
:
1
,
})
const
handleStep
=
(
params
:
string
)
=>
{
if
(
stepState
[
params
]
>=
3
)
{
stepState
[
params
]
=
1
setStepState
({
...
stepState
})
}
else
{
stepState
[
params
]
+=
1
setStepState
({
...
stepState
})
}
}
return
(
<>
<
Steps
current
=
{
stepState
.
current2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"步骤一"
content
=
"步骤描述"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"步骤二"
content
=
"步骤描述"
></
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"步骤三"
content
=
"步骤描述"
></
Step
>
</
Steps
>
<
div
className
=
"steps-button"
style
=
{
{
marginTop
:
'
10px
'
,
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
()
=>
handleStep
(
'
current2
'
)
}
>
下一步
</
Button
>
</
div
>
</>
)
}
export
default
App
;
```
### 自定义图标
```
tsx
<
Steps
current
=
{
1
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
icon
=
"service"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
icon
=
"people"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
icon
=
"location2"
>
3
</
Step
>
</
Steps
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Steps
,
Step
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
stepState
,
setStepState
]
=
useState
<
any
>
({
current1
:
1
,
current2
:
1
,
current3
:
1
,
current4
:
1
,
current5
:
1
,
})
const
handleStep
=
(
params
:
string
)
=>
{
if
(
stepState
[
params
]
>=
3
)
{
stepState
[
params
]
=
1
setStepState
({
...
stepState
})
}
else
{
stepState
[
params
]
+=
1
setStepState
({
...
stepState
})
}
}
return
(
<>
<
Steps
current
=
{
1
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
icon
=
"service"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
icon
=
"people"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
icon
=
"location2"
>
3
</
Step
>
</
Steps
>
</>
)
}
export
default
App
;
```
### 竖向步骤条
```
tsx
<
Steps
direction
=
"vertical"
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
content
=
"您的订单已经打包完成,商品已发出"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
content
=
"您的订单正在配送途中"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
content
=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</
Step
>
</
Steps
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Steps
,
Step
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
stepState
,
setStepState
]
=
useState
<
any
>
({
current1
:
1
,
current2
:
1
,
current3
:
1
,
current4
:
1
,
current5
:
1
,
})
const
handleStep
=
(
params
:
string
)
=>
{
if
(
stepState
[
params
]
>=
3
)
{
stepState
[
params
]
=
1
setStepState
({
...
stepState
})
}
else
{
stepState
[
params
]
+=
1
setStepState
({
...
stepState
})
}
}
return
(
<
div
className
=
"steps-wrapper"
style
=
{
{
height
:
'
300px
'
,
padding
:
'
15px 30px
'
}
}
>
<
Steps
direction
=
"vertical"
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
content
=
"您的订单已经打包完成,商品已发出"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
content
=
"您的订单正在配送途中"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
content
=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</
Step
>
</
Steps
>
</
div
>
)
}
export
default
App
;
```
### 点状步骤和垂直方向
```
tsx
<
Steps
direction
=
"vertical"
progressDot
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
content
=
"您的订单已经打包完成,商品已发出"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
content
=
"您的订单正在配送途中"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
renderContent
=
{
()
=>
(
<>
<
p
>
收货地址为:
</
p
>
<
p
>
北京市经济技术开发区科创十一街18号院京东大厦
</
p
>
</>
)
}
>
3
</
Step
>
</
Steps
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Steps
,
Step
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
stepState
,
setStepState
]
=
useState
<
any
>
({
current1
:
1
,
current2
:
1
,
current3
:
1
,
current4
:
1
,
current5
:
1
,
})
const
handleStep
=
(
params
:
string
)
=>
{
if
(
stepState
[
params
]
>=
3
)
{
stepState
[
params
]
=
1
setStepState
({
...
stepState
})
}
else
{
stepState
[
params
]
+=
1
setStepState
({
...
stepState
})
}
}
return
(
<
div
className
=
"steps-wrapper"
style
=
{
{
height
:
'
300px
'
,
padding
:
'
15px 30px
'
}
}
>
<
Steps
direction
=
"vertical"
progressDot
current
=
{
2
}
>
<
Step
activeIndex
=
{
1
}
title
=
"已完成"
content
=
"您的订单已经打包完成,商品已发出"
>
1
</
Step
>
<
Step
activeIndex
=
{
2
}
title
=
"进行中"
content
=
"您的订单正在配送途中"
>
2
</
Step
>
<
Step
activeIndex
=
{
3
}
title
=
"未开始"
renderContent
=
{
()
=>
(
<>
<
p
>
收货地址为:
</
p
>
<
p
>
北京市经济技术开发区科创十一街18号院京东大厦
</
p
>
</>
)
}
>
3
</
Step
>
</
Steps
>
</
div
>
)
}
export
default
App
;
```
...
...
src/packages/uploader/doc.md
浏览文件 @
74581570
...
...
@@ -6,7 +6,7 @@
### 安装
```
javascript
```
ts
import
{
Uploader
}
from
'
@nutui/nutui-react
'
;
```
...
...
@@ -14,71 +14,195 @@ import { Uploader } from '@nutui/nutui-react';
### 基本用法
:::demo
```
tsx
<
Uploader
url
=
"http://服务器地址"
></
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
const
onStart
=
()
=>
{
console
.
log
(
'
start 触发
'
)
}
return
(
<>
<
h2
>
基础用法
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
start
=
{
onStart
}
></
Uploader
>
</>
)
}
export
default
App
;
```
### 自定义上传样式
```
tsx
<
Uploader
url
=
"http://服务器地址"
>
<
Button
type
=
"primary"
icon
=
"uploader"
>
上传文件
</
Button
>
</
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
return
(
<>
<
h2
>
自定义上传样式
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
>
<
Button
type
=
"primary"
icon
=
"uploader"
>
上传文件
</
Button
>
</
Uploader
>
</>
)
}
export
default
App
;
```
### 直接调起摄像头(移动端生效)
```
tsx
<
Uploader
url
=
"http://服务器地址"
capture
></
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
return
(
<>
<
h2
>
直接调起摄像头(移动端生效)
</
h2
>
<
Uploader
capture
url
=
{
uploadUrl
}
></
Uploader
>
</>
)
}
export
default
App
;
```
### 上传状态
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
const
onDelete
=
(
file
:
FileItem
,
fileList
:
FileItem
[])
=>
{
console
.
log
(
'
delete 事件触发
'
,
file
,
fileList
)
}
return
(
<>
<
h2
>
上传状态
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
multiple
removeImage
=
{
onDelete
}
></
Uploader
>
</>
)
}
export
default
App
;
```
### 限制上传数量5个
```
tsx
<
Uploader
url
=
"http://服务器地址"
multiple
maximum
=
"5"
></
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
return
(
<>
<
h2
>
限制上传数量5个
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
multiple
maximum
=
"5"
></
Uploader
>
</>
)
}
export
default
App
;
```
### 限制上传大小(每个文件最大不超过 50kb,也可以在beforeupload中自行处理)
```
tsx
<
Uploader
url
=
"http://服务器地址"
multiple
maximize
=
{
1024
*
50
}
beforeUpload
=
{
beforeUpload
}
oversize
=
{
onOversize
}
></
Uploader
>
```
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
```
javascript
const
formData
=
{
custom
:
'
test
'
};
const
onOversize
=
(
files
:
File
[])
=>
{
console
.
log
(
'
oversize 触发 文件大小不能超过 50kb
'
,
files
);
};
const
beforeUpload
=
(
files
:
File
[])
=>
{
//自定义处理
return
files
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
const
onOversize
=
(
files
:
File
[])
=>
{
console
.
log
(
'
oversize 触发 文件大小不能超过 50kb
'
,
files
)
}
return
(
<>
<
h2
>
限制上传大小(每个文件最大不超过 50kb)
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
multiple
maximize
=
{
1024
*
50
}
oversize
=
{
onOversize
}
></
Uploader
>
</>
)
}
export
default
App
;
```
### 自定义 FormData headers
```
tsx
<
Uploader
url
=
"http://服务器地址"
data
=
{
formData
}
headers
=
{
formData
}
withCredentials
=
{
true
}
></
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
const
formData
=
{
custom
:
'
test
'
,
}
return
(
<>
<
h2
>
自定义 FormData headers
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
data
=
{
formData
}
headers
=
{
formData
}
withCredentials
=
{
true
}
></
Uploader
>
</>
)
}
export
default
App
;
```
```
javascript
const
formData
=
{
custom
:
'
test
'
};
const
onOversize
=
(
files
:
File
[])
=>
{
console
.
log
(
'
oversize 触发 文件大小不能超过 50kb
'
,
files
);
};
const
beforeUpload
=
(
files
:
File
[])
=>
{
//自定义处理
return
files
;
### 手动上传
```
tsx
import
React
,
{
useState
,
useRef
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
uploadUrl
=
'
https://my-json-server.typicode.com/linrufeng/demo/posts
'
const
uploadRef
=
useRef
(
null
)
const
submitUpload
=
()
=>
{
uploadRef
.
current
.
submit
()
}
return
(
<>
<
h2
>
手动上传
</
h2
>
<
Uploader
url
=
{
uploadUrl
}
maximum
=
"5"
autoUpload
=
{
false
}
ref
=
{
uploadRef
}
></
Uploader
>
<
br
/>
<
Button
type
=
"success"
size
=
"small"
onClick
=
{
submitUpload
}
>
执行上传
</
Button
>
</>
)
}
export
default
App
;
```
### 禁用状态
```
tsx
<
Uploader
disabled
></
Uploader
>
import
React
,
{
useState
}
from
"
react
"
;
import
{
Uploader
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
h2
>
禁用状态
</
h2
>
<
Uploader
disabled
></
Uploader
>
</>
)
}
export
default
App
;
```
### Prop
...
...
src/sites/doc/components/demoblock/basedUtil.ts
浏览文件 @
74581570
...
...
@@ -18,7 +18,7 @@ export function decompressText(str: string): any {
}
export
function
copyCodeHtml
(
code
:
string
,
callback
:
any
):
void
{
const
oInput
=
document
.
createElement
(
'
input
'
)
const
oInput
=
document
.
createElement
(
'
textarea
'
)
oInput
.
value
=
code
document
.
body
.
appendChild
(
oInput
)
oInput
.
select
()
// 选择对象
...
...
src/sites/doc/components/demoblock/demoblock.tsx
浏览文件 @
74581570
...
...
@@ -11,7 +11,7 @@ const DemoBlock: React.FunctionComponent<A> = (props) => {
import React from "react";
import ReactDOM from "react-dom";
import '@nutui/nutui-react/dist/style.css'
import App from "./app.
j
sx";
import App from "./app.
t
sx";
import "./app.scss";
ReactDOM.render(
<App/>,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录