mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(ActionSheet): add v-model api (#6017)
This commit is contained in:
parent
7cff3de052
commit
cc4c68dc2b
@ -123,6 +123,7 @@ export default {
|
|||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
|
| v-model (value) | Whether to show ActionSheet | *boolean* | `false` |
|
||||||
| actions | Options | *Action[]* | `[]` |
|
| actions | Options | *Action[]* | `[]` |
|
||||||
| title | Title | *string* | - |
|
| title | Title | *string* | - |
|
||||||
| cancel-text | Text of cancel button | *string* | - |
|
| cancel-text | Text of cancel button | *string* | - |
|
||||||
|
@ -1,4 +1,8 @@
|
|||||||
# ActionSheet 上拉菜单
|
# ActionSheet 动作面板
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
底部弹起的模态面板,包含与当前情境相关的多个选项。
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
@ -46,7 +50,7 @@ export default {
|
|||||||
|
|
||||||
### 展示取消按钮
|
### 展示取消按钮
|
||||||
|
|
||||||
设置`cancel-text`属性后,会在底部展示取消按钮,点击后关闭当前菜单
|
设置`cancel-text`属性后,会在底部展示取消按钮,点击后关闭当前面板
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-action-sheet
|
<van-action-sheet
|
||||||
@ -117,7 +121,7 @@ export default {
|
|||||||
|
|
||||||
### 自定义面板
|
### 自定义面板
|
||||||
|
|
||||||
通过插槽可以自定义菜单的展示内容,同时可以使用`title`属性展示标题栏
|
通过插槽可以自定义面板的展示内容,同时可以使用`title`属性展示标题栏
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-action-sheet v-model="show" title="标题">
|
<van-action-sheet v-model="show" title="标题">
|
||||||
@ -137,7 +141,8 @@ export default {
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| actions | 菜单选项 | *Action[]* | `[]` |
|
| v-model (value) | 是否显示动作面板 | *boolean* | `false` |
|
||||||
|
| actions | 面板选项列表 | *Action[]* | `[]` |
|
||||||
| title | 顶部标题 | *string* | - |
|
| title | 顶部标题 | *string* | - |
|
||||||
| cancel-text | 取消按钮文字 | *string* | - |
|
| cancel-text | 取消按钮文字 | *string* | - |
|
||||||
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
||||||
@ -172,14 +177,14 @@ export default {
|
|||||||
|------|------|------|
|
|------|------|------|
|
||||||
| select | 选中选项时触发,禁用或加载状态下不会触发 | *action: Action, index: number* |
|
| select | 选中选项时触发,禁用或加载状态下不会触发 | *action: Action, index: number* |
|
||||||
| cancel | 取消按钮点击时触发 | - |
|
| cancel | 取消按钮点击时触发 | - |
|
||||||
| open | 打开菜单时触发 | - |
|
| open | 打开面板时触发 | - |
|
||||||
| close | 关闭菜单时触发 | - |
|
| close | 关闭面板时触发 | - |
|
||||||
| opened | 打开菜单且动画结束后触发 | - |
|
| opened | 打开面板且动画结束后触发 | - |
|
||||||
| closed | 关闭菜单且动画结束后触发 | - |
|
| closed | 关闭面板且动画结束后触发 | - |
|
||||||
| click-overlay | 点击遮罩层时触发 | - |
|
| click-overlay | 点击遮罩层时触发 | - |
|
||||||
|
|
||||||
## 常见问题
|
## 常见问题
|
||||||
|
|
||||||
### 引入时提示 dependencies not found?
|
### 引入时提示 dependencies not found?
|
||||||
|
|
||||||
在 1.x 版本中,上拉菜单的组件名为`Actionsheet`,从 2.0 版本开始更名为`ActionSheet`,请注意区分。
|
在 1.x 版本中,动作面板的组件名为`Actionsheet`,从 2.0 版本开始更名为`ActionSheet`,请注意区分。
|
||||||
|
@ -117,7 +117,7 @@ export default {
|
|||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| v-model | Whether to show popup | *boolean* | `false` |
|
| v-model (value) | Whether to show popup | *boolean* | `false` |
|
||||||
| overlay | Whether to show overlay | *boolean* | `true` |
|
| overlay | Whether to show overlay | *boolean* | `true` |
|
||||||
| position | Can be set to `top` `bottom` `right` `left` | *string* | `center` |
|
| position | Can be set to `top` `bottom` `right` `left` | *string* | `center` |
|
||||||
| overlay-class | Custom overlay class | *string* | - |
|
| overlay-class | Custom overlay class | *string* | - |
|
||||||
|
@ -128,7 +128,7 @@ export default {
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| v-model | 当前组件是否显示 | *boolean* | `false` |
|
| v-model (value) | 是否显示弹出层 | *boolean* | `false` |
|
||||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||||
| position | 弹出位置,可选值为 `top` `bottom` `right` `left` | *string* | `center` |
|
| position | 弹出位置,可选值为 `top` `bottom` `right` `left` | *string* | `center` |
|
||||||
| overlay-class | 自定义遮罩层类名 | *string* | - |
|
| overlay-class | 自定义遮罩层类名 | *string* | - |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user