Skip to content

Commit c4ee9f3

Browse files
AmyFoxFNAmyFoxFN
committed
update picker docs
1 parent 908f7de commit c4ee9f3

File tree

3 files changed

+151
-58
lines changed

3 files changed

+151
-58
lines changed

‎document/components/docs/en-US/picker.md‎

Lines changed: 103 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,25 @@
1010
<cube-button @click="showPicker">Picker</cube-button>
1111
```
1212
```js
13-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
13+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
14+
{ text: '幽鬼', value: '幽鬼' }]
1415
export default {
1516
mounted () {
1617
this.picker = this.$createPicker({
17-
title: 'Picker selectors - single column',
18+
title: 'Picker',
1819
data: [col1Data],
19-
onSelect: (selectedText, selectedIndex) => {
20+
onSelect: (selectedVal, selectedIndex, selectedText) => {
2021
this.$createDialog({
2122
type: 'warn',
22-
content: `selected content：${selectedText.join(',')} <br/> selected index： ${selectedIndex.join(',')}`,
23+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
24+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
2325
icon: 'cubeic-alert'
2426
}).show()
2527
},
2628
onCancel: () => {
2729
this.$createToast({
2830
type: 'correct',
29-
txt: 'Clicked cancel button',
31+
txt: 'Picker canceled',
3032
time: 1000
3133
}).show()
3234
}
@@ -40,21 +42,40 @@
4042
}
4143
```
4244

43-
- Multi-column selectors
45+
- Multi-column Picker
4446

4547
```html
46-
<cube-button @click="showPicker">Picker - multiple Columns</cube-button>
48+
<cube-button @click="showPicker">Multi-column Picker</cube-button>
4749
```
4850
```js
49-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
50-
const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心'
51-
}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }]
52-
const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }]
51+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
52+
{ text: '幽鬼', value: '幽鬼' }]
53+
const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' },
54+
{ text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' },
55+
{ text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }]
56+
const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' },
57+
{ text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' },
58+
{ text: '金箍棒', value: '金箍棒' }]
5359
export default {
5460
mounted () {
5561
this.picker = this.$createPicker({
56-
title: 'Picker selectors - multiple columns',
57-
data: [col1Data, col2Data, col3Data]
62+
title: 'Multi-column Picker',
63+
data: [col1Data, col2Data, col3Data],
64+
onSelect: (selectedVal, selectedIndex, selectedText) => {
65+
this.$createDialog({
66+
type: 'warn',
67+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
68+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
69+
icon: 'cubeic-alert'
70+
}).show()
71+
},
72+
onCancel: () => {
73+
this.$createToast({
74+
type: 'correct',
75+
txt: 'Picker canceled',
76+
time: 1000
77+
}).show()
78+
}
5879
})
5980
},
6081
methods: {
@@ -67,10 +88,10 @@
6788

6889
`data` receives an array, whose length determines the columns of `picker`.
6990

70-
- Linkage selectors
91+
- Linkage Picker
7192

7293
```html
73-
<cube-button @click="showPicker">Picker - linkage</cube-button>
94+
<cube-button @click="showPicker">Linkage Picker</cube-button>
7495
```
7596
```js
7697
import { provinceList, cityList, areaList } from '../data/area'
@@ -83,30 +104,31 @@
83104
},
84105
mounted () {
85106
this.picker = this.$createPicker({
86-
title: 'Picker - linkage data',
107+
title: 'Linkage Picker',
87108
data: this.linkageData,
88109
onChange: (i, newIndex) => {
89110
if (newIndex !== this.tempIndex[i]) {
90111
for (let j = 2; j > i; j--) {
91112
this.tempIndex.splice(j, 1, 0)
92-
this.picker.scrollTo(j, 0)
113+
this.linkagePicker.scrollTo(j, 0)
93114
}
94115

95116
this.tempIndex.splice(i, 1, newIndex)
96-
this.picker.setData(this.linkageData, this.tempIndex)
117+
this.linkagePicker.setData(this.linkageData, this.tempIndex)
97118
}
98119
},
99-
onSelect: (selectedText, selectedIndex) => {
120+
onSelect: (selectedVal, selectedIndex, selectedText) => {
100121
this.$createDialog({
101122
type: 'warn',
102-
content: `selected content：${selectedText.join(',')} <br/> selected index： ${selectedIndex.join(',')}`,
123+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
124+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
103125
icon: 'cubeic-alert'
104126
}).show()
105127
},
106128
onCancel: () => {
107129
this.$createToast({
108130
type: 'correct',
109-
txt: 'Clicked cancel button',
131+
txt: 'Picker canceled',
110132
time: 1000
111133
}).show()
112134
}
@@ -139,27 +161,32 @@
139161
- Instance method `setData`
140162

141163
```html
142-
<cube-button @click="showPicker">Picker - setData</cube-button>
164+
<cube-button @click="showPicker">SetData Picker</cube-button>
143165
```
144166
```js
145-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
146-
const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }]
147-
const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }]
167+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
168+
{ text: '幽鬼', value: '幽鬼' }]
169+
const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' },
170+
{ text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' },
171+
{ text: '金箍棒', value: '金箍棒' }]
172+
const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' },
173+
{ text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }]
148174
export default {
149175
mounted () {
150176
this.picker = this.$createPicker({
151-
title: 'Picker-setData',
152-
onSelect: (selectedText, selectedIndex) => {
177+
title: 'Use SetData',
178+
onSelect: (selectedVal, selectedIndex, selectedText) => {
153179
this.$createDialog({
154180
type: 'warn',
155-
content: `selected content：${selectedText.join(',')} <br/> selectedIndex： ${selectedIndex.join(',')}`,
181+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
182+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
156183
icon: 'cubeic-alert'
157184
}).show()
158185
},
159186
onCancel: () => {
160187
this.$createToast({
161188
type: 'correct',
162-
txt: 'Clicked cancel button',
189+
txt: 'Picker canceled',
163190
time: 1000
164191
}).show()
165192
}
@@ -175,7 +202,51 @@
175202
```
176203

177204
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
205+
206+
- Extended component: Date Picker
178207

208+
Besides use directly, we could extend many common pickers based on the raw Picker, such as Date Picker and Time Picker. As for Extended pickers, the method of API calling is also recommended. Take Date Picker as an example, We wrote a post-packaging Date Picker component ([source code](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)) at first. And after `createAPI` for this component, it could be used as following.
209+
210+
```html
211+
<cube-button @click="showDatePicker">Date Picker</cube-button>
212+
```
213+
```js
214+
import Vue from 'vue'
215+
import createAPI from '@/modules/create-api'
216+
import DatePicker from 'example/components/date-picker.vue'
217+
218+
createAPI(Vue, DatePicker, ['select', 'cancel'], false)
219+
220+
export default {
221+
mounted () {
222+
this.datePicker = this.$createDatePicker({
223+
min: [2008, 8, 8],
224+
max: [2020, 10, 20],
225+
onSelect: (selectedVal, selectedIndex, selectedText) => {
226+
this.$createDialog({
227+
type: 'warn',
228+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
229+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
230+
icon: 'cubeic-alert'
231+
}).show()
232+
},
233+
onCancel: () => {
234+
this.$createToast({
235+
type: 'correct',
236+
txt: 'Picker canceled',
237+
time: 1000
238+
}).show()
239+
}
240+
})
241+
},
242+
methods: {
243+
showDatePicker () {
244+
this.datePicker.show()
245+
}
246+
}
247+
}
248+
```
249+
179250
### Props configuration
180251

181252
| Attribute | Description | Type | Accepted Values | Default |
@@ -195,9 +266,9 @@
195266

196267
### Events
197268

198-
| Event Name | Description | Parameters 1 | Parameters 2 |
199-
| - | - | - | - |
200-
| select | triggers when clicking the confirm button | selectedVal: Array, values of each columns in current selected item | selectedIndex: Array, indexes of each columns in current selected item |
269+
| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
270+
| - | - | - | - | - |
271+
| select | triggers when clicking the confirm button | selectedVal: Array, values of each columns in current selected item | selectedIndex: Array, indexes of each columns in current selected item | selectedText: Array, texts of each columns in current selected item |
201272
| change | triggers when the roller scrolls | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column |
202273
| value-change | triggers when confirmed value changes| selectedVal: Array, values of each columns in current confirmed item | selectedIndex: Array, indexes of each columns in current confirmed item |
203274
| cancel | triggers when clicking the cancel button | - | - |

‎document/components/docs/zh-CN/picker.md‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,23 @@
55
### 示例
66

77
- 基本用法
8+
89
```html
910
<cube-button @click="showPicker">Picker</cube-button>
1011
```
1112
```js
12-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
13+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
14+
{ text: '幽鬼', value: '幽鬼' }]
1315
export default {
1416
mounted () {
1517
this.picker = this.$createPicker({
16-
title: 'Single Column',
18+
title: 'Picker',
1719
data: [col1Data],
1820
onSelect: (selectedVal, selectedIndex, selectedText) => {
1921
this.$createDialog({
2022
type: 'warn',
21-
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
23+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
24+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
2225
icon: 'cubeic-alert'
2326
}).show()
2427
},
@@ -40,22 +43,29 @@
4043
```
4144

4245
- 多列选择器
46+
4347
```html
44-
<cube-button @click="showPicker">Picker - multiple Columns</cube-button>
48+
<cube-button @click="showPicker">Multiple Columns Picker</cube-button>
4549
```
4650
```js
47-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
48-
const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }]
49-
const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }]
51+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
52+
{ text: '幽鬼', value: '幽鬼' }]
53+
const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' },
54+
{ text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' },
55+
{ text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }]
56+
const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' },
57+
{ text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' },
58+
{ text: '金箍棒', value: '金箍棒' }]
5059
export default {
5160
mounted () {
5261
this.picker = this.$createPicker({
53-
title: 'Multiple Columns',
62+
title: 'Multi-column Picker',
5463
data: [col1Data, col2Data, col3Data],
5564
onSelect: (selectedVal, selectedIndex, selectedText) => {
5665
this.$createDialog({
5766
type: 'warn',
58-
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
67+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
68+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
5969
icon: 'cubeic-alert'
6070
}).show()
6171
},
@@ -75,11 +85,13 @@
7585
}
7686
}
7787
```
88+
7889
`data`字段接收一个数组，其长度决定了`picker`的列数。
7990

8091
- 联动选择器
92+
8193
```html
82-
<cube-button @click="showPicker">Picker - linkage</cube-button>
94+
<cube-button @click="showPicker">Linkage Picker</cube-button>
8395
```
8496
```js
8597
import { provinceList, cityList, areaList } from '../data/area'
@@ -108,7 +120,8 @@
108120
onSelect: (selectedVal, selectedIndex, selectedText) => {
109121
this.$createDialog({
110122
type: 'warn',
111-
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
123+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
124+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
112125
icon: 'cubeic-alert'
113126
}).show()
114127
},
@@ -142,24 +155,31 @@
142155
}
143156
}
144157
```
158+
145159
通过监听每个滚轴触发的`change`事件，然后调用`setData`方法去动态设置相关联的滚轴的值来完成联动选择的功能。
146160

147161
- 实例方法 `setData`
162+
148163
```html
149-
<cube-button @click="showPicker">Picker - setData</cube-button>
164+
<cube-button @click="showPicker">SetData Picker</cube-button>
150165
```
151166
```js
152-
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
153-
const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, { text: '金箍棒', value: '金箍棒' }]
154-
const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }]
167+
const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
168+
{ text: '幽鬼', value: '幽鬼' }]
169+
const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' },
170+
{ text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' },
171+
{ text: '金箍棒', value: '金箍棒' }]
172+
const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' },
173+
{ text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }]
155174
export default {
156175
mounted () {
157176
this.picker = this.$createPicker({
158-
title: 'Picker-setData',
177+
title: 'Use SetData',
159178
onSelect: (selectedVal, selectedIndex, selectedText) => {
160179
this.$createDialog({
161180
type: 'warn',
162-
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
181+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
182+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
163183
icon: 'cubeic-alert'
164184
}).show()
165185
},
@@ -180,11 +200,12 @@
180200
}
181201
}
182202
```
203+
183204
实例方法`setData`可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。
184205

185206
- 扩展组件：日期选择器
186207

187-
除了直接调用，我们还可以基于扩展 Picker 组件扩展出很多常用的选择器，如日期选择器、时间选择器。对于扩展的选择器组件，我们依然推荐以 API 的形式调用，以日期选择器为例，首先基于 Picker 组件二次封装一个 DatePicker 组件（[源码](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)），然后对该组件 createAPI 后，便可如下使用。
208+
除了直接调用，我们还可以基于扩展 Picker 组件扩展出很多常用的选择器，如日期选择器、时间选择器。对于扩展的选择器组件，我们依然推荐以 API 的形式调用，以日期选择器为例，首先基于 Picker 组件二次封装一个 DatePicker 组件（[源码](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)），然后对该组件`createAPI`后，便可如下使用。
188209

189210
```html
190211
<cube-button @click="showDatePicker">Date Picker</cube-button>
@@ -204,7 +225,8 @@
204225
onSelect: (selectedVal, selectedIndex, selectedText) => {
205226
this.$createDialog({
206227
type: 'warn',
207-
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
228+
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
229+
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
208230
icon: 'cubeic-alert'
209231
}).show()
210232
},
@@ -223,7 +245,7 @@
223245
}
224246
}
225247
}
226-
```
248+
```
227249

228250
### Props 配置
229251

0 commit comments

Comments
 (0)