Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
239d09c3
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
239d09c3
编写于
4月 01, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: actionsheet
上级
2e3f1d54
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
43 addition
and
42 deletion
+43
-42
src/packages/actionsheet/demo.vue
src/packages/actionsheet/demo.vue
+7
-6
src/packages/actionsheet/doc.md
src/packages/actionsheet/doc.md
+36
-36
未找到文件。
src/packages/actionsheet/demo.vue
浏览文件 @
239d09c3
<
template
>
<div
class=
"demo-list demo"
>
<h2>
基本用法
(选择类)
</h2>
<h2>
基本用法
</h2>
<nut-cell
:show
I
con=
"true"
:show
-i
con=
"true"
:isLink=
"true"
@
click=
"switchActionSheet('isVisible1')"
>
<span><label>
基础用法
</label></span>
<div
class=
"selected-option"
>
{{
state
.
val1
}}
</div>
<div
class=
"selected-option"
v-html=
"state.val1"
>
</div>
</nut-cell>
<nut-cell
:showIcon=
"true"
...
...
@@ -15,11 +15,11 @@
@
click=
"switchActionSheet('isVisible2')"
>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
>
{{
state
.
val2
}}
</div>
<div
class=
"selected-option"
v-html=
"state.val2"
>
</div>
</nut-cell>
<nut-cell
:isLink=
"true"
@
click=
"switchActionSheet('isVisible3')"
>
<span><label>
展示描述信息
</label></span>
<div
class=
"selected-option"
>
{{
state
.
val3
}}
</div>
<div
class=
"selected-option"
v-html=
"state.val3"
>
</div>
</nut-cell>
<h2>
选项状态
</h2>
...
...
@@ -39,7 +39,8 @@
cancel-txt=
"取消"
:menu-items=
"menuItemsOne"
@
choose=
"chooseItemTwo"
></nut-actionsheet>
>
</nut-actionsheet>
<!-- 展示描述信息 -->
<nut-actionsheet
:is-visible=
"state.isVisible3"
...
...
src/packages/actionsheet/doc.md
浏览文件 @
239d09c3
...
...
@@ -2,39 +2,39 @@
从底部弹出的动作菜单面板。
## 基本用法
(选择类)
## 基本用法
默认
```
html
```
html
<div
@
click=
"switchActionSheet"
>
<span><label>
基础用法
</label></span>
<div
class=
"selected-option"
>
state.val }}
</div>
<div
class=
"selected-option"
v-html=
"state.val"
>
</div>
</div>
<nut-actionsheet
:is-visible=
"state.isVisible"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
></nut-actionsheet>
:is-visible=
"state.isVisible"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
></nut-actionsheet>
```
## 展示取消按钮
```
html
<div
@
click=
"switchActionSheet"
>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
>
state.val }}
</div>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
v-html=
"state.val"
>
</div>
</div>
<nut-actionsheet
:is-visible=
"isVisible"
@
close=
"switchActionSheet"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
cancel-txt=
"取消"
<nut-actionsheet
:is-visible=
"isVisible"
@
close=
"switchActionSheet"
:menu-items=
"menuItems"
@
choose=
"chooseItem"
cancel-txt=
"取消"
></nut-actionsheet>
```
## 展示描述信息
```
html
<div
@
click.native=
"switchActionSheet"
>
<span><label>
展示取消按钮
</label></span>
<div
class=
"selected-option"
>
state.val }}
</div>
<div
class=
"selected-option"
v-html=
"state.val"
>
</div>
</div>
<nut-actionsheet
:is-visible=
"isVisible"
@
close=
"switchActionSheet"
...
...
@@ -49,14 +49,14 @@
```
html
<div
@
click.native=
"switchActionSheet"
>
<span
class=
"title"
><label>
性别
</label></span>
<span
class=
"selected-option"
>
{{sex}}
</span>
<span
class=
"selected-option"
v-html=
"sex"
>
</span>
</div>
<nut-actionsheet
@
close=
"switchActionSheet"
:is-visible=
"state.isVisible4"
cancel-txt=
"取消"
:menu-items=
"menuItemsThree"
></nut-actionsheet>
:is-visible=
"state.isVisible4"
cancel-txt=
"取消"
:menu-items=
"menuItemsThree"
></nut-actionsheet>
```
```
javascript
...
...
@@ -91,23 +91,23 @@ setup() {
## Prop
| 字段
| 说明 | 类型 | 默认值
|-----
| ----- | ----- | -----
| cancel-txt
| 取消文案 | String | '取消'
| menu-items
| 列表项 | Array | [ ]
| option-tag
| 设置列表项展示使用参数 | String | 'name'
| is-visible
| 遮罩层可见 | Boolean | false
| option-sub-tag
| 设置列表项描述展示使用参数 | String | 'subname'
| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String
| ''
| title
| 设置列表项标题 | String | ''
| description
| 设置列表项副标题/描述 | String | ''
| color
| 高亮颜色 | String | '#ee0a24'
| close-abled
| 遮罩层是否可关闭 | Boolean | true
| 字段
| 说明 | 类型 | 默认值 |
|-----
-------------|----------------------------------------|---------|-----------|
| cancel-txt
| 取消文案 | String | '取消' |
| menu-items
| 列表项 | Array | [ ] |
| option-tag
| 设置列表项展示使用参数 | String | 'name' |
| is-visible
| 遮罩层可见 | Boolean | false |
| option-sub-tag
| 设置列表项描述展示使用参数 | String | 'subname' |
| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String
| '' |
| title
| 设置列表项标题 | String | '' |
| description
| 设置列表项副标题/描述 | String | '' |
| color
| 高亮颜色 | String | '#ee0a24' |
| close-abled
| 遮罩层是否可关闭 | Boolean | true |
## Event
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index
| cancel | 点击取消文案时触发 | 无
\ No newline at end of file
| 字段 | 说明 | 回调参数 |
|--------|--------------------|-----------------------------------|
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index |
| cancel | 点击取消文案时触发 | 无 |
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录