Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
02709d36
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,发现更多精彩内容 >>
提交
02709d36
编写于
12月 06, 2021
作者:
B
bjdushoujun
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: actionsheet组件开发完成
上级
70c34055
变更
8
显示空白变更内容
内联
并排
Showing
8 changed file
with
467 addition
and
8 deletion
+467
-8
src/config.json
src/config.json
+10
-0
src/packages/actionsheet/actionsheet.scss
src/packages/actionsheet/actionsheet.scss
+68
-0
src/packages/actionsheet/actionsheet.tsx
src/packages/actionsheet/actionsheet.tsx
+120
-0
src/packages/actionsheet/demo.tsx
src/packages/actionsheet/demo.tsx
+136
-0
src/packages/actionsheet/doc.md
src/packages/actionsheet/doc.md
+120
-0
src/packages/actionsheet/index.ts
src/packages/actionsheet/index.ts
+2
-0
src/packages/overlay/overlay.tsx
src/packages/overlay/overlay.tsx
+6
-6
src/packages/popup/popup.tsx
src/packages/popup/popup.tsx
+5
-2
未找到文件。
src/config.json
浏览文件 @
02709d36
...
...
@@ -292,6 +292,16 @@
"show"
:
true
,
"desc"
:
"弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示"
,
"author"
:
"szg2008"
},
{
"version"
:
"1.0.0"
,
"name"
:
"ActionSheet"
,
"type"
:
"component"
,
"cName"
:
"动作面板"
,
"desc"
:
"从底部弹出的动作菜单面板。"
,
"sort"
:
11
,
"show"
:
true
,
"author"
:
"dsj"
}
]
},
...
...
src/packages/actionsheet/actionsheet.scss
0 → 100644
浏览文件 @
02709d36
.nut-actionsheet
{
display
:
block
;
.nut-actionsheet__title
{
display
:
block
;
padding
:
10px
;
margin
:
0
;
text-align
:
center
;
background-color
:
$white
;
border-bottom
:
1px
solid
$light-color
;
font-size
:
$font-size-base
;
color
:
$title-color
;
}
.nut-actionsheet-modal
{
.nut-actionsheet__title
,
.nut-actionsheet-sub-title
{
padding
:
5px
0
;
}
.nut-actionsheet-sub-title
{
display
:
block
;
font-size
:
$font-size-small
;
color
:
$title-color
;
margin-inline-start
:
0px
;
}
}
.nut-actionsheet__menu
{
display
:
block
;
list-style
:
none
;
padding
:
0
;
margin
:
0
;
}
.nut-actionsheet__cancel
,
.nut-actionsheet__item
{
display
:
block
;
// height: 24px;
padding
:
10px
;
line-height
:
24px
;
font-size
:
$font-size-base
;
color
:
$title-color
;
text-align
:
center
;
background-color
:
#fff
;
cursor
:
pointer
;
}
.desc
{
font-size
:
$font-size-2
;
color
:
#999
;
}
.subdesc
{
display
:
block
;
font-size
:
$font-size-small
;
color
:
#999
;
}
.nut-actionsheet__item-disabled
{
color
:
#e1e1e1
!
important
;
cursor
:
not
-
allowed
;
}
.nut-actionsheet__cancel
{
margin-top
:
5px
;
border-top
:
1px
solid
$light-color
;
}
}
src/packages/actionsheet/actionsheet.tsx
0 → 100644
浏览文件 @
02709d36
import
React
,
{
FunctionComponent
,
useState
,
useEffect
}
from
'
react
'
import
Popup
from
'
@/packages/popup
'
import
'
./actionsheet.scss
'
import
bem
from
'
@/utils/bem
'
export
type
ItemType
<
T
>
=
{
[
key
:
string
]:
T
}
export
interface
ActionSheetProps
{
cancelTxt
:
string
optionTag
:
string
optionSubTag
:
string
chooseTagValue
:
string
title
:
string
color
:
string
description
:
string
menuItems
:
ItemType
<
string
|
boolean
>
[]
cancel
:
()
=>
void
choose
:
(
item
:
any
,
index
:
number
)
=>
void
visible
:
boolean
className
:
string
style
:
React
.
CSSProperties
}
const
defaultProps
=
{
cancelTxt
:
''
,
optionTag
:
'
name
'
,
optionSubTag
:
'
subname
'
,
chooseTagValue
:
''
,
title
:
''
,
color
:
'
#ee0a24
'
,
description
:
''
,
menuItems
:
[],
cancel
:
()
=>
{},
choose
:
()
=>
{},
visible
:
false
,
className
:
''
,
style
:
{},
}
as
ActionSheetProps
export
const
ActionSheet
:
FunctionComponent
<
Partial
<
ActionSheetProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
props
)
=>
{
const
{
cancelTxt
,
optionTag
,
optionSubTag
,
chooseTagValue
,
title
,
color
,
description
,
menuItems
,
cancel
,
choose
,
visible
,
className
,
style
,
}
=
{
...
defaultProps
,
...
props
}
const
[
isShow
,
setIsShow
]
=
useState
(
false
)
const
b
=
bem
(
'
actionsheet
'
)
useEffect
(()
=>
{
setIsShow
(
visible
)
},
[
visible
])
const
isHighlight
=
(
item
:
ItemType
<
string
|
boolean
>
)
=>
{
return
props
.
chooseTagValue
&&
props
.
chooseTagValue
===
item
[
props
.
optionTag
||
'
name
'
]
?
props
.
color
:
'
#1a1a1a
'
}
const
cancelActionSheet
=
()
=>
{
cancel
&&
cancel
()
}
const
chooseItem
=
(
item
:
ItemType
<
string
|
boolean
>
,
index
:
number
)
=>
{
if
(
!
item
.
disable
)
{
choose
&&
choose
(
item
,
index
)
}
}
return
(
<
Popup
round
visible
=
{
visible
}
position
=
"bottom"
onClose
=
{
()
=>
{
cancel
&&
cancel
()
}
}
>
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
>
{
title
&&
<
div
className
=
{
b
(
'
title
'
)
}
>
{
title
}
</
div
>
}
{
description
&&
<
div
className
=
{
`
${
b
(
'
item
'
)}
desc`
}
>
{
description
}
</
div
>
}
{
menuItems
.
length
?
(
<
div
className
=
{
b
(
'
menu
'
)
}
>
{
menuItems
.
map
((
item
,
index
)
=>
{
return
(
<
div
className
=
{
`
${
b
(
'
item
'
)}
${
item
.
disable
?
b
(
'
item-disabled
'
)
:
''
}
`
}
style
=
{
{
color
:
isHighlight
(
item
)
}
}
key
=
{
index
}
onClick
=
{
()
=>
chooseItem
(
item
,
index
)
}
>
{
item
[
optionTag
]
}
<
div
className
=
"subdesc"
>
{
item
[
optionSubTag
]
}
</
div
>
</
div
>
)
})
}
</
div
>
)
:
null
}
{
cancelTxt
&&
(
<
div
className
=
{
b
(
'
cancel
'
)
}
onClick
=
{
()
=>
cancelActionSheet
()
}
>
{
cancelTxt
}
</
div
>
)
}
</
div
>
</
Popup
>
)
}
ActionSheet
.
defaultProps
=
defaultProps
ActionSheet
.
displayName
=
'
NutActionSheet
'
src/packages/actionsheet/demo.tsx
0 → 100644
浏览文件 @
02709d36
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
ActionSheet
,
ItemType
}
from
'
./actionsheet
'
import
Cell
from
'
@/packages/cell
'
interface
Item
{
name
:
string
subname
?:
string
disable
?:
boolean
}
const
ActionSheetDemo
=
()
=>
{
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
)
const
[
isVisible2
,
setIsVisible2
]
=
useState
(
false
)
const
[
isVisible3
,
setIsVisible3
]
=
useState
(
false
)
const
[
isVisible4
,
setIsVisible4
]
=
useState
(
false
)
const
[
val1
,
setVal1
]
=
useState
(
''
)
const
[
val2
,
setVal2
]
=
useState
(
''
)
const
[
val3
,
setVal3
]
=
useState
(
''
)
const
menuItemsOne
:
ItemType
<
string
>
[]
=
[
{
name
:
'
选项一
'
,
},
{
name
:
'
选项二
'
,
},
{
name
:
'
选项三
'
,
},
]
const
menuItemsTwo
:
ItemType
<
string
>
[]
=
[
{
name
:
'
选项一
'
,
},
{
name
:
'
选项二
'
,
},
{
name
:
'
选项三
'
,
subname
:
'
描述信息
'
,
},
]
const
menuItemsThree
:
ItemType
<
string
|
boolean
>
[]
=
[
{
name
:
'
着色选项
'
,
},
{
name
:
'
禁用选项
'
,
disable
:
true
,
},
]
const
chooseItem
=
(
itemParams
:
any
)
=>
{
console
.
log
(
itemParams
.
name
,
'
itemParams
'
)
setVal1
(
itemParams
.
name
)
setIsVisible1
(
false
)
}
const
chooseItemTwo
=
(
itemParams
:
Item
)
=>
{
setVal2
(
itemParams
.
name
)
setIsVisible2
(
false
)
}
const
chooseItemThree
=
(
itemParams
:
Item
)
=>
{
setVal3
(
itemParams
.
name
)
setIsVisible3
(
false
)
}
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基本用法
</
h2
>
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible1
(
!
isVisible1
)
}
>
<
span
>
<
label
>
基础用法
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val1
}
</
div
>
</
Cell
>
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible2
(
!
isVisible2
)
}
>
<
span
>
<
label
>
展示取消按钮
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val2
}
</
div
>
</
Cell
>
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible3
(
!
isVisible3
)
}
>
<
span
>
<
label
>
展示描述信息
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val3
}
</
div
>
</
Cell
>
<
h2
>
选项状态
</
h2
>
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible4
(
!
isVisible4
)
}
>
<
span
>
<
label
>
选项状态
</
label
>
</
span
>
</
Cell
>
{
/* demo 基础用法 */
}
<
ActionSheet
visible
=
{
isVisible1
}
menuItems
=
{
menuItemsOne
}
choose
=
{
chooseItem
}
cancel
=
{
()
=>
setIsVisible1
(
false
)
}
></
ActionSheet
>
{
/* demo(带取消按钮) */
}
<
ActionSheet
visible
=
{
isVisible2
}
cancelTxt
=
"取消"
menuItems
=
{
menuItemsOne
}
choose
=
{
chooseItemTwo
}
cancel
=
{
()
=>
setIsVisible2
(
false
)
}
></
ActionSheet
>
{
/* 展示描述信息 */
}
<
ActionSheet
visible
=
{
isVisible3
}
description
=
"这是一段描述信息"
menuItems
=
{
menuItemsTwo
}
choose
=
{
chooseItemThree
}
cancelTxt
=
"取消"
cancel
=
{
()
=>
setIsVisible3
(
false
)
}
></
ActionSheet
>
{
/* demo 选项状态 */
}
<
ActionSheet
visible
=
{
isVisible4
}
cancelTxt
=
"取消"
cancel
=
{
()
=>
setIsVisible4
(
false
)
}
menuItems
=
{
menuItemsThree
}
chooseTagValue
=
"着色选项"
choose
=
{
()
=>
{
setIsVisible4
(
false
)
}
}
></
ActionSheet
>
</
div
>
</>
)
}
export
default
ActionSheetDemo
src/packages/actionsheet/doc.md
0 → 100644
浏览文件 @
02709d36
# ActionSheet 动作面板
### 介绍
从底部弹出的动作菜单面板。
### 安装
```
javascript
import
{
ActionSheet
}
from
'
@nutui/nutui
'
;
```
## 基本用法
默认
```
html
<div
@
click=
"switchActionSheet"
>
<span><label>
基础用法
</label></span>
<div
class=
"selected-option"
v-html=
"state.val"
></div>
</div>
<nut-actionsheet
v-model:visible=
"state.isVisible"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
></nut-actionsheet>
```
## 展示取消按钮
```
html
<div
@
click=
"switchActionSheet"
>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
v-html=
"state.val"
></div>
</div>
<nut-actionsheet
v-model:visible=
"isVisible"
@
close=
"switchActionSheet"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
cancel-txt=
"取消"
></nut-actionsheet>
```
## 展示描述信息
```
html
<div
@
click=
"switchActionSheet"
>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
v-html=
"state.val"
></div>
</div>
<nut-actionsheet
v-model:visible=
"isVisible"
@
close=
"switchActionSheet"
description=
"state.desc"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
cancel-txt=
"取消"
></nut-actionsheet>
```
## 选项状态
```
html
<div
@
click=
"switchActionSheet"
>
<span
class=
"title"
><label>
性别
</label></span>
<span
class=
"selected-option"
v-html=
"sex"
></span>
</div>
<nut-actionsheet
@
close=
"switchActionSheet"
v-model:visible=
"state.isVisible4"
cancel-txt=
"取消"
:menu-items=
"menuItemsThree"
></nut-actionsheet>
```
```
javascript
setup
()
{
const
state
=
reactive
({
isVisible
:
false
,
value
:
''
,
desc
:
'
这是一段描述信息
'
});
const
menuItems
=
[
{
name
:
'
选项一
'
,
value
:
0
},
{
name
:
'
选项二
'
,
value
:
1
},
{
name
:
'
选项三
'
,
value
:
2
}
];
const
switchActionSheet
=
()
=>
{
state
.
isVisible
=
!
state
.
isVisible
};
const
chooseItem
=
(
item
,
index
)
=>
{
console
.
log
(
item
,
index
);
};
```
## Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------|---------|-----------|
| cancelTxt | 取消文案 | String | '取消' |
| menuItems | 列表项 | Array | [ ] |
| optionTag | 设置列表项展示使用参数 | String | 'name' |
| visible | 遮罩层可见 | Boolean | false |
| optionSubTag | 设置列表项描述展示使用参数 | String | 'subname' |
| chooseTagValue | 设置选中项的值,和'option-tag'的值对应 | String | '' |
| title | 设置列表项标题 | String | '' |
| description | 设置列表项副标题/描述 | String | '' |
| color | 高亮颜色 | String | '#ee0a24' |
## Event
| 字段 | 说明 | 回调参数 |
|--------|--------------------|-----------------------------------|
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index |
| cancel | 点击取消文案时触发 | 无 |
\ No newline at end of file
src/packages/actionsheet/index.ts
0 → 100644
浏览文件 @
02709d36
import
{
ActionSheet
}
from
'
./actionsheet
'
export
default
ActionSheet
src/packages/overlay/overlay.tsx
浏览文件 @
02709d36
...
...
@@ -24,9 +24,6 @@ export const defaultOverlayProps = {
export
const
Overlay
:
FunctionComponent
<
Partial
<
OverlayProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
props
)
=>
{
const
[
show
,
setShow
]
=
useState
(
false
)
const
renderRef
=
useRef
(
true
)
const
intervalRef
=
useRef
(
0
)
const
{
children
,
zIndex
,
...
...
@@ -41,9 +38,12 @@ export const Overlay: FunctionComponent<
...
defaultOverlayProps
,
...
props
,
}
const
[
show
,
setShow
]
=
useState
(
visible
)
const
renderRef
=
useRef
(
true
)
const
intervalRef
=
useRef
(
0
)
useEffect
(()
=>
{
setShow
(
fals
e
)
visible
&&
setShow
(
visibl
e
)
lock
()
},
[
visible
])
...
...
@@ -61,7 +61,7 @@ export const Overlay: FunctionComponent<
'
overlay-fade-leave-active
'
:
!
renderRef
.
current
&&
!
visible
,
'
overlay-fade-enter-active
'
:
visible
,
'
first-render
'
:
renderRef
.
current
&&
!
visible
,
'
hidden-render
'
:
show
,
'
hidden-render
'
:
!
visible
,
},
overlayClass
,
b
(
''
)
...
...
@@ -86,7 +86,7 @@ export const Overlay: FunctionComponent<
props
.
onClick
&&
props
.
onClick
(
e
)
renderRef
.
current
=
false
let
id
=
setTimeout
(()
=>
{
setShow
(
tru
e
)
setShow
(
!
visibl
e
)
},
duration
*
1000
*
0.8
)
intervalRef
.
current
=
id
}
...
...
src/packages/popup/popup.tsx
浏览文件 @
02709d36
...
...
@@ -129,7 +129,7 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
// if(zIndex !== undefined) {
// _zIndex = +zIndex;
// }
setInnerVisible
(
visibl
e
)
setInnerVisible
(
tru
e
)
setIndex
(
++
_zIndex
)
}
if
(
destroyOnClose
)
{
...
...
@@ -139,8 +139,9 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
}
const
close
=
()
=>
{
console
.
log
(
'
close
'
,
innerVisible
,
visible
)
if
(
innerVisible
)
{
setInnerVisible
(
!
visibl
e
)
setInnerVisible
(
fals
e
)
if
(
destroyOnClose
)
{
setTimeout
(()
=>
{
setShowChildren
(
false
)
...
...
@@ -175,7 +176,9 @@ export const Popup: FunctionComponent<Partial<PopupProps> & React.HTMLAttributes
}
useEffect
(()
=>
{
console
.
log
(
'
popup
'
,
visible
)
visible
&&
open
()
!
visible
&&
close
()
},
[
visible
])
useEffect
(()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录