docs: fix ActionSheet example doc (#1997)

This commit is contained in:
君寻 2019-09-09 16:32:54 +08:00 committed by neverland
parent fd82af0ac1
commit be606db468
3 changed files with 81 additions and 38 deletions

View File

@ -1,22 +1,32 @@
import Page from '../../common/page'; import Page from '../../common/page';
Page({ Page({
data: { data: {
show1: false, show1: false,
show2: false, show2: false,
show3: false show3: false,
}, show4: false,
action1: [
onLoad() { {
this.setData({ name: '选项'
actions: [ },
{ name: '选项' }, {
{ name: '分享', subname: '描述信息', openType: 'share' }, name: '选项'
{ loading: true }, },
{ name: '禁用选项', disabled: true } {
] name: '选项',
}); subname: '描述信息'
}
],
action2: [
{
name: '选项'
},
{
loading: true
},
{ name: '禁用选项', disabled: true }
]
}, },
toggle(type) { toggle(type) {
@ -35,5 +45,9 @@ Page({
toggleActionSheet3() { toggleActionSheet3() {
this.toggle('show3'); this.toggle('show3');
} },
toggleActionSheet4() {
this.toggle('show4');
},
}); });

View File

@ -1,18 +1,18 @@
<demo-block title="基础用法" padding> <demo-block title="基础用法" padding>
<van-button bind:click="toggleActionSheet1">弹出 ActionSheet</van-button> <van-button bind:click="toggleActionSheet1">弹出菜单</van-button>
<van-action-sheet <van-action-sheet
show="{{ show1 }}" show="{{ show1 }}"
actions="{{ actions }}" actions="{{ action1 }}"
bind:close="toggleActionSheet1" bind:close="toggleActionSheet1"
bind:select="toggleActionSheet1" bind:select="toggleActionSheet1"
/> />
</demo-block> </demo-block>
<demo-block title="带取消按钮的 ActionSheet" padding> <demo-block title="选项状态" padding>
<van-button bind:click="toggleActionSheet2">弹出带取消按钮的 ActionSheet</van-button> <van-button bind:click="toggleActionSheet2">弹出菜单</van-button>
<van-action-sheet <van-action-sheet
show="{{ show2 }}" show="{{ show2 }}"
actions="{{ actions }}" actions="{{ action2 }}"
cancel-text="取消" cancel-text="取消"
bind:close="toggleActionSheet2" bind:close="toggleActionSheet2"
bind:cancel="toggleActionSheet2" bind:cancel="toggleActionSheet2"
@ -20,12 +20,23 @@
/> />
</demo-block> </demo-block>
<demo-block title="带标题的 ActionSheet" padding> <demo-block title="展示取消按钮" padding>
<van-button bind:click="toggleActionSheet3">弹出带标题的 ActionSheet</van-button> <van-button bind:click="toggleActionSheet3">弹出菜单</van-button>
<van-action-sheet <van-action-sheet
show="{{ show3 }}" show="{{ show3 }}"
title="标题" actions="{{ action1 }}"
cancel-text="取消"
bind:close="toggleActionSheet3" bind:close="toggleActionSheet3"
>
</van-action-sheet>
</demo-block>
<demo-block title="展示标题栏" padding>
<van-button bind:click="toggleActionSheet4">弹出菜单</van-button>
<van-action-sheet
show="{{ show4 }}"
title="标题"
bind:close="toggleActionSheet4"
> >
<view class="content">内容</view> <view class="content">内容</view>
</van-action-sheet> </van-action-sheet>

View File

@ -35,16 +35,12 @@ Page({
name: '选项' name: '选项'
}, },
{ {
name: '分享', name: '选项'
},
{
name: '选项',
subname: '描述信息', subname: '描述信息',
openType: 'share' openType: 'share'
},
{
loading: true
},
{
name: '禁用选项',
disabled: true
} }
] ]
}, },
@ -59,27 +55,49 @@ Page({
}); });
``` ```
### 带取消按钮的 ActionSheet ### 选项状态
如果传入了`cancelText`属性,且不为空,则会在下方显示一个取消按钮,点击会将当前`ActionSheet`关闭 选项可以设置为加载状态或禁用状态
```html ```html
<van-action-sheet <van-action-sheet
show="{{ show }}" show="{{ show }}"
actions="{{ actions }}" actions="{{ actions }}"
cancel-text="取消" cancel-text="取消"
bind:close="onClose" />
```
```javascript
Page({
data: {
actions: [
{ name: '选项'},
{ loading: true },
{ name: '禁用选项', disabled: true }
]
}
})
```
### 展示取消按钮
设置cancelText属性后会在底部展示取消按钮点击后关闭当前菜单
```html
<van-action-sheet
show="{{ show }}"
actions="{{ actions }}"
cancel-text="取消"
/> />
``` ```
### 带标题的 ActionSheet ### 展示标题栏
如果传入了`title`属性,且不为空,则另外一种样式的`ActionSheet`,里面内容需要自定义。 设置cancelText属性后会在底部展示取消按钮点击后关闭当前菜单
```html ```html
<van-action-sheet show="{{ show }}" title="支持以下配送方式"> <van-action-sheet show="{{ show }}" title="标题">
<view>一些内容</view> <view>内容</view>
</van-action-sheet> <van-action-sheet/>
``` ```
## API ## API