1 | ---
|
2 | title: Picker
|
3 | preview: https://didi.github.io/mand-mobile/examples/#/picker
|
4 | ---
|
5 |
|
6 | Scrollable multi-column selector
|
7 |
|
8 | ### Import
|
9 |
|
10 | ```javascript
|
11 | import { Picker } from 'mand-mobile'
|
12 |
|
13 | Vue.component(Picker.name, Picker)
|
14 | ```
|
15 |
|
16 | ### Code Examples
|
17 |
|
18 |
|
19 | ### API
|
20 |
|
21 | #### Picker Props
|
22 | |Props | Description | Type | Default | Note|
|
23 | |----|-----|------|------|------|
|
24 | |v-model|display picker or not|Boolean|`false`|-|
|
25 | |data|data source|Array<{value, label, ...}>[]|`[]`|-|
|
26 | |cols|number of columns|Number|`1`|-|
|
27 | |default-index|indexes of initially selected items in each column|Array|`[]`|-|
|
28 | |default-value|values of initially selected items in each column|Array|`[]`|Available key `text/label/value`|
|
29 | |invalid-index|indexes of disabled items in each column|Array|`[]`|array of multiple disabled items, such as `[[1,2], 2]`|
|
30 | |is-view|inline display in page, otherwise it shows as `Popup`|Boolean|`false`|-|
|
31 | |is-cascade|data in each column is cascaded or not|Boolean|`false`|see #Appendix for the format of cascaded data|
|
32 | |keep-index <sup class="version-after">2.5.2+</sup>|keep last stop position when the column data changes|Boolean|`false`|only for cascaded data|
|
33 | |line-height|line height of options|Number|`45`|unit `px`|
|
34 | |title|title of picker|String|-|-|
|
35 | |describe|description of picker|String|-|-|
|
36 | |ok-text|confirmation text|String|`confirm`|-|
|
37 | |cancel-text|cancellation text|String|`cancel`|-|
|
38 | |large-radius <sup class="version-after">2.4.0+</sup>|large radius of title bar|Boolean|`false`|-|
|
39 | |mask-closable|picker will be closed when clicking mask|Boolean|`true`|-|
|
40 |
|
41 | #### Picker Methods
|
42 |
|
43 | ##### refresh(callback, startColumnIndex)
|
44 | Reinitialized picker, like updating `data`、`default-index`、`invalid-index` or call `setColumnValues`,it can also be replaced with [key](https://vuejs.org/v2/api/#key)
|
45 |
|
46 | |Parameters | Description | Type|
|
47 | |----|-----|------|
|
48 | |callback|initialization completes callback|Function|
|
49 | |startColumnIndex|the starting index of the column to reset, default value is 0|Function|
|
50 |
|
51 | ##### getColumnValue(index): activeItemValue
|
52 | Get the data of the currently selected item in a column, need to be called after the `initialed` event is invoked or asynchronously called
|
53 |
|
54 | |Parameters | Description | Type|
|
55 | |----|-----|------|
|
56 | |index|the index of each column|Number|
|
57 |
|
58 | Returns
|
59 |
|
60 | |Props | Description | Type|
|
61 | |----|-----|------|
|
62 | |activeItemValue|value of selected item|Object: {value, label, ...}|
|
63 |
|
64 | ##### getColumnValues(): columnsValue
|
65 | Get values of all selected columns, need to be called after the `initialed` event is invoked or asynchronously called
|
66 |
|
67 | Returns
|
68 |
|
69 | |Props | Description | Type|
|
70 | |----|-----|------|
|
71 | |columnsValue|values of all selected columns|Array<{value, label, ...}>|
|
72 |
|
73 | ##### getColumnIndex(index): activeItemIndex
|
74 | Get the index of the currently selected item in the column, need to be called after the `initialed` event is invoked or asynchronously called
|
75 |
|
76 | |Parameters | Description | Type|
|
77 | |----|-----|------|
|
78 | |index|the index of column|Number|
|
79 |
|
80 | Returns
|
81 |
|
82 | |Props | Description | Type|
|
83 | |----|-----|------|
|
84 | |activeItemIndex|the index of selected item|Number|
|
85 |
|
86 | ##### getColumnIndexs(): columnsIndex
|
87 | Get indexes of all selected columns, need to be called after the `initialed` event is invoked or asynchronously called
|
88 |
|
89 | Returns
|
90 |
|
91 | |Props | Description | Type|
|
92 | |----|-----|------|
|
93 | |columnsIndex|indexes of all selected columns|Array|
|
94 |
|
95 | ##### setColumnValues(index, values, callback)
|
96 | Set column data
|
97 |
|
98 | |Parameters | Description | Type|
|
99 | |----|-----|------|
|
100 | |index|the index of each column|Number|
|
101 | |values|data of each column|Array<{value, label, ...}>|
|
102 | |callback|callback is completed after setting `values`|Function|
|
103 |
|
104 | #### Picker Events
|
105 |
|
106 | ##### @initialed()
|
107 | Initialize picker, callable functions are `getColumnIndex`, `getColumnIndexs`, `getColumnValue`, `getColumnValues`
|
108 |
|
109 | ##### @change(columnIndex, itemIndex, value)
|
110 | Change pickers' selections
|
111 |
|
112 | |Parameters | Description | Type|
|
113 | |----|-----|------|
|
114 | |columnIndex|the index of changed column|Number|
|
115 | |itemIndex|the index of changed item in the column|Number|
|
116 | |value|the value of changed item in the column|Object: {value, label, ...}|
|
117 |
|
118 | ##### @confirm(columnsValue)
|
119 | Confirm picker's selection (only when `is-view` is `false`)
|
120 |
|
121 | |Parameters | Description | Type|
|
122 | |----|-----|------|
|
123 | |columnsValue|values of all selected columns|Array<{value, label, ...}>|
|
124 |
|
125 | ##### @cancel()
|
126 | Cancel picker's selection (only when `is-view` is `false`)
|
127 |
|
128 | ##### @show()
|
129 | Show picker (only when `is-view` is `false`)
|
130 |
|
131 | ##### @hide()
|
132 | Hide picker (only when `is-view` is `false`)
|
133 |
|
134 | ### Appendix
|
135 |
|
136 | * The format of non-cascade data source
|
137 |
|
138 | ```javascript
|
139 | [
|
140 | [
|
141 | {
|
142 | // Option display text
|
143 | "text": "",
|
144 | // custom fields
|
145 | "value": ""
|
146 | },
|
147 | // ...
|
148 | ],
|
149 | // ...
|
150 | ]
|
151 | ```
|
152 |
|
153 | * The format of cascaded data source
|
154 |
|
155 | ```javascript
|
156 | [
|
157 | [
|
158 | {
|
159 | // ption display text
|
160 | "text": "",
|
161 | // data of second column
|
162 | "children": [
|
163 | {
|
164 | "text": "",
|
165 | // data of third column
|
166 | "children": [
|
167 | // ...
|
168 | ]
|
169 | },
|
170 | // ...
|
171 | ]
|
172 | // custom fields
|
173 | "value": ""
|
174 | },
|
175 | // ...
|
176 | ]
|
177 | ]
|
178 | ```
|