| 1 | ---
|
| 2 | title: ActionSheet
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/action-sheet
|
| 4 | ---
|
| 5 |
|
| 6 | Support scenario-relevent operations
|
| 7 |
|
| 8 | ### Import
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { ActionSheet } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(ActionSheet.name, ActionSheet)
|
| 14 |
|
| 15 | this.$actionsheet.create({ /* ... */ }) // Totally Import
|
| 16 | ```
|
| 17 |
|
| 18 | ### Code Examples
|
| 19 |
|
| 20 |
|
| 21 |
|
| 22 | ### API
|
| 23 |
|
| 24 | #### ActionSheet Props
|
| 25 | |Props | Description | Type | Default | Note |
|
| 26 | |----|-----|------|------|------|------|
|
| 27 | |v-model|display actionsheet or not|Boolean|`false`|-|
|
| 28 | |title|title of actionsheet|String|-|-|
|
| 29 | |options|options of actionsheet|Array<{text, value}>| [] |-|
|
| 30 | |default-index|default selected index|Boolean|0|-|
|
| 31 | |invalid-index|invalid index|Number| -1|-|
|
| 32 | |cancel-text|cancel text|String|-|-|
|
| 33 | |large-radius <sup class="version-after">2.4.0+</sup>|large radius|Boolean|`false`|-|
|
| 34 |
|
| 35 | #### ActionSheet Events
|
| 36 |
|
| 37 | ##### @selected(item)
|
| 38 | Select event
|
| 39 |
|
| 40 | |Props | Description | Type |
|
| 41 | |----|-----|------|
|
| 42 | |item|selected value|Object: {text, value}|
|
| 43 |
|
| 44 | ##### @selected(item)
|
| 45 |
|
| 46 | Cancel selection
|
| 47 |
|
| 48 | ##### @show()
|
| 49 |
|
| 50 | Show actionsheet
|
| 51 |
|
| 52 | ##### @hide()
|
| 53 |
|
| 54 | Hide actionsheet
|
| 55 |
|
| 56 | #### ActionSheet Static Methods
|
| 57 |
|
| 58 | ##### create(props)
|
| 59 | Static create a global ActionSheet, and return instance. You can change instance `value` to toggle the visibility of ActionSheet.
|
| 60 |
|
| 61 | |----|-----|------|------|------|------|
|
| 62 | |value|display actionsheet or not|Boolean|`true`|-|
|
| 63 | |title|title of actionsheet|String|-|-|
|
| 64 | |options|options of actionsheet|Array<{text, value}>| [] |-|
|
| 65 | |defaultIndex|default selected index|Boolean|0|-|
|
| 66 | |invalidIndex|invalid index|Number| -1|-|
|
| 67 | |cancelText|cancel text|String|-|-|
|
| 68 | |maxHeight|the maximum height of actionsheet area|Number|`400`|unit `px`|
|
| 69 | |onShow|actionsheet show callback|Function|-|-|
|
| 70 | |onHide|actionsheet hide callback|Function|-|-|
|
| 71 | |onCancel|cancel selection callback|Function|-|-|
|
| 72 | |onSelected|selection callback|Function(item: {text, value})|-|-|
|
| 73 |
|
| 74 | ##### closeAll()
|
| 75 | Close all global ActionSheets
|
| 76 |
|
| 77 | #### destroyAll()
|
| 78 | Close and destroy all global ActionSheets
|