mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs: fix ActionSheet example doc (#1997)
This commit is contained in:
parent
fd82af0ac1
commit
be606db468
@ -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');
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user