docs(ActionSheet): update v-model usage

This commit is contained in:
chenjiahan 2020-07-25 22:05:47 +08:00
parent bb445b74ef
commit 1e441e86a5
4 changed files with 14 additions and 12 deletions

View File

@ -17,7 +17,7 @@ Use `actions` prop to set options of action-sheet.
```html
<van-cell is-link title="Basic Usage" @click="show = true" />
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
```
```js
@ -47,7 +47,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="Cancel"
close-on-click-action
@ -81,7 +81,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="Cancel"
description="Description"
@ -108,7 +108,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="Cancel"
close-on-click-action
@ -133,7 +133,7 @@ export default {
### Custom Panel
```html
<van-action-sheet v-model="show" title="Title">
<van-action-sheet v-model:show="show" title="Title">
<div class="content">Content</div>
</van-action-sheet>
@ -150,7 +150,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` |
| v-model:show | Whether to show ActionSheet | _boolean_ | `false` |
| actions | Options | _Action[]_ | `[]` |
| title | Title | _string_ | - |
| cancel-text | Text of cancel button | _string_ | - |

View File

@ -21,7 +21,7 @@ Vue.use(ActionSheet);
```html
<van-cell is-link title="基础用法" @click="show = true" />
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
```
```js
@ -51,7 +51,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="取消"
close-on-click-action
@ -83,7 +83,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="取消"
description="这是一段描述信息"
@ -112,7 +112,7 @@ export default {
```html
<van-action-sheet
v-model="show"
v-model:show="show"
:actions="actions"
cancel-text="取消"
close-on-click-action
@ -139,7 +139,7 @@ export default {
通过插槽可以自定义面板的展示内容,同时可以使用`title`属性展示标题栏
```html
<van-action-sheet v-model="show" title="标题">
<van-action-sheet v-model:show="show" title="标题">
<div class="content">内容</div>
</van-action-sheet>
@ -156,7 +156,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model (value) | 是否显示动作面板 | _boolean_ | `false` |
| v-model:show | 是否显示动作面板 | _boolean_ | `false` |
| actions | 面板选项列表 | _Action[]_ | `[]` |
| title | 顶部标题 | _string_ | - |
| cancel-text | 取消按钮文字 | _string_ | - |

View File

@ -110,6 +110,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show ShareSheet | _boolean_ | `false` |
| options | Share options | _Option[]_ | `[]` |
| title | Title | _string_ | - |
| cancel-text | Cancel button text | _string_ | `'Cancel'` |

View File

@ -156,6 +156,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model:show | 是否显示分享面板 | _boolean_ | `false` |
| options | 分享选项 | _Option[]_ | `[]` |
| title | 顶部标题 | _string_ | - |
| cancel-text | 取消按钮文字 | _string_ | `'取消'` |