Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
d196037a
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,体验更适合开发者的 AI 搜索 >>
提交
d196037a
编写于
12月 14, 2021
作者:
B
bjdushoujun
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: review问题修改
上级
264bf591
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
121 addition
and
75 deletion
+121
-75
src/packages/actionsheet/actionsheet.tsx
src/packages/actionsheet/actionsheet.tsx
+2
-1
src/packages/actionsheet/doc.md
src/packages/actionsheet/doc.md
+119
-74
未找到文件。
src/packages/actionsheet/actionsheet.tsx
浏览文件 @
d196037a
...
...
@@ -52,6 +52,7 @@ export const ActionSheet: FunctionComponent<
visible
,
className
,
style
,
...
rest
}
=
{
...
defaultProps
,
...
props
}
const
[
isShow
,
setIsShow
]
=
useState
(
false
)
...
...
@@ -86,7 +87,7 @@ export const ActionSheet: FunctionComponent<
cancel
&&
cancel
()
}
}
>
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
>
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
style
}
{
...
rest
}
>
{
title
&&
<
div
className
=
{
b
(
'
title
'
)
}
>
{
title
}
</
div
>
}
{
description
&&
<
div
className
=
{
`
${
b
(
'
item
'
)}
desc`
}
>
{
description
}
</
div
>
}
{
menuItems
.
length
?
(
...
...
src/packages/actionsheet/doc.md
浏览文件 @
d196037a
...
...
@@ -9,91 +9,136 @@
```
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>
```
tsx
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible1
(
!
isVisible1
)
}
>
<
span
>
<
label
>
基础用法
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val1
}
</
div
>
</
Cell
>
<
ActionSheet
visible
=
{
isVisible1
}
menuItems
=
{
menuItemsOne
}
choose
=
{
chooseItem
}
cancel
=
{
()
=>
setIsVisible1
(
false
)
}
></
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>
### 展示取消按钮
```
tsx
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible2
(
!
isVisible2
)
}
>
<
span
>
<
label
>
展示取消按钮
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val2
}
</
div
>
</
Cell
>
<
ActionSheet
visible
=
{
isVisible2
}
cancelTxt
=
"取消"
menuItems
=
{
menuItemsOne
}
choose
=
{
chooseItemTwo
}
cancel
=
{
()
=>
setIsVisible2
(
false
)
}
></
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>
### 展示描述信息
```
tsx
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible3
(
!
isVisible3
)
}
>
<
span
>
<
label
>
展示描述信息
</
label
>
</
span
>
<
div
className
=
"selected-option"
>
{
val3
}
</
div
>
</
Cell
>
<
ActionSheet
visible
=
{
isVisible3
}
description
=
"这是一段描述信息"
menuItems
=
{
menuItemsTwo
}
choose
=
{
chooseItemThree
}
cancelTxt
=
"取消"
cancel
=
{
()
=>
setIsVisible3
(
false
)
}
></
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>
### 选项状态
```
tsx
<
Cell
isLink
=
{
true
}
onClick
=
{
()
=>
setIsVisible4
(
!
isVisible4
)
}
>
<
span
>
<
label
>
选项状态
</
label
>
</
span
>
</
Cell
>
<
ActionSheet
visible
=
{
isVisible4
}
cancelTxt
=
"取消"
cancel
=
{
()
=>
setIsVisible4
(
false
)
}
menuItems
=
{
menuItemsThree
}
chooseTagValue
=
"着色选项"
choose
=
{
()
=>
{
setIsVisible4
(
false
)
}
}
></
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
);
};
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
)
}
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录