Picker
Scrollable multi-column selector
Import
import { Picker } from 'mand-mobile-next'
Vue.createApp().component(Picker.name, Picker)
Code Examples
API
Picker Props
Props | Description | Type | Default | Note |
---|---|---|---|---|
v-model | values of initially selected items in each column | Array | [] | Available key value |
data | data source | Array<{value, text, ...}>[] | [] | - |
cols | number of columns | Number | 1 | - |
invalid-value | values of disabled items in each column | Array | [] | array of multiple disabled items, such as [[1,2], [2]] |
is-view | inline display in page, otherwise it shows as Popup | Boolean | false | - |
is-cascade | data in each column is cascaded or not | Boolean | false | see #Appendix for the format of cascaded data |
keep-index | keep last stop position when the column data changes | Boolean | false | only for cascaded data |
line-height | line height of options | Number | 45 | unit px |
title | title of picker | String | - | - |
describe | description of picker | String | - | - |
ok-text | confirmation text | String | confirm | - |
cancel-text | cancellation text | String | cancel | - |
mask-closable | picker will be closed when clicking mask | Boolean | true | - |
Picker Methods
getColumnValue(index): activeItemValue
Get the data of the currently selected item in a column
Parameters | Description | Type |
---|---|---|
index | the index of each column | Number |
Returns
Props | Description | Type |
---|---|---|
activeItemValue | value of selected item | Object: {value, text, ...} |
Picker Events
@change(columnIndex, itemIndex, value)
Change pickers' selections
Parameters | Description | Type |
---|---|---|
columnIndex | the index of changed column | Number |
itemIndex | the index of changed item in the column | Number |
value | the value of changed item in the column | Object: {value, text, ...} |
@confirm()
Confirm picker's selection (only when is-view
is false
)
@cancel()
Cancel picker's selection (only when is-view
is false
)
@show()
Show picker (only when is-view
is false
)
@hide()
Hide picker (only when is-view
is false
)
Appendix
- The format of non-cascade data source
[
[
{
// Option display text
"text": "",
// Option value
"value": ""
},
// ...
],
// ...
]
- The format of cascaded data source
[
[
{
// Option display text
"text": "",
// data of second column
"children": [
{
"text": "",
// data of third column
"children": [
// ...
]
},
// ...
]
// Option value
"value": ""
},
// ...
]
]