| 1 | ---
|
| 2 | title: ActionSheet 动作面板
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/action-sheet
|
| 4 | ---
|
| 5 |
|
| 6 | 用于提供场景相关的多个操作动作
|
| 7 |
|
| 8 | ### 引入
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { ActionSheet } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(ActionSheet.name, ActionSheet)
|
| 14 |
|
| 15 | this.$actionsheet.create({ /* ... */ }) // 全量引入
|
| 16 | ```
|
| 17 |
|
| 18 | ### 代码演示
|
| 19 |
|
| 20 |
|
| 21 | ### API
|
| 22 |
|
| 23 | #### ActionSheet Props
|
| 24 | |属性 | 说明 | 类型 | 默认值 | 备注 |
|
| 25 | |----|-----|------|------|------|
|
| 26 | |v-model|面板是否可见|Boolean| `false`|-|
|
| 27 | |title|面板标题|String|-|-|
|
| 28 | |options|面板选项| Array<{text, value}>| `[]`|-|
|
| 29 | |default-index|默认选中项| Boolean| `0`|-|
|
| 30 | |invalid-index|禁用选择项索引 |Number|`-1`|-|
|
| 31 | |cancel-text|取消按钮文案 |String |-|-|
|
| 32 | |large-radius <sup class="version-after">2.4.0+</sup>|大圆角模式|Boolean|`false`|-|
|
| 33 |
|
| 34 | #### ActionSheet Events
|
| 35 |
|
| 36 | ##### @selected(item)
|
| 37 | 选择事件
|
| 38 |
|
| 39 | |属性 | 说明 | 类型 |
|
| 40 | |----|-----|------|
|
| 41 | |item| 选中项的值 | Object: {text, value} |
|
| 42 |
|
| 43 | ##### @cancel()
|
| 44 | 取消选择事件
|
| 45 |
|
| 46 | ##### @show()
|
| 47 | 面板展示事件
|
| 48 |
|
| 49 | ##### @hide()
|
| 50 | 面板隐藏事件
|
| 51 |
|
| 52 | #### ActionSheet Static Methods
|
| 53 |
|
| 54 | ##### create(props)
|
| 55 | 静态方法创建操作菜单, 返回ActionSheet实例。可以通过控制实例的`value`属性来控制显示或隐藏操作菜单。
|
| 56 |
|
| 57 | |属性 | 说明 | 类型 | 默认值 | 备注 |
|
| 58 | |----|-----|------|------|------|
|
| 59 | |value|面板是否立即可见|Boolean| `true`|-|
|
| 60 | |title|面板标题|String|-|-|
|
| 61 | |options|面板选项| Array<{text, value}>| `[]`|-|
|
| 62 | |defaultIndex|默认选中项| Boolean| `0`|-|
|
| 63 | |invalidIndex|禁用选择项索引 |Number|`-1`|-|
|
| 64 | |cancelText|取消按钮文案 |String |-|-|
|
| 65 | |maxHeight|面板最高高度, 超出后可滚动|Number|400|单位`px`|
|
| 66 | |onShow|面板展示回调|Function|-|-|
|
| 67 | |onHide|面板隐藏回调|Function|-|-|
|
| 68 | |onCancel|取消选择回调|Function|-|-|
|
| 69 | |onSelected|选择回调|Function(item: {text, value})|-|-|
|
| 70 |
|
| 71 | ##### closeAll()
|
| 72 | 关闭所有全局操作菜单
|
| 73 |
|
| 74 | ##### destroyAll()
|
| 75 | 关闭并销毁所有全局操作菜单
|