diff --git a/document/components/docs/en-US/cascade-picker.md b/document/components/docs/en-US/cascade-picker.md
index 033e85132b96970d6fb5c1655583994f9ebaefcd..947ea383bb1f27f18ee62344fb09bb46f2085c07 100644
--- a/document/components/docs/en-US/cascade-picker.md
+++ b/document/components/docs/en-US/cascade-picker.md
@@ -6,7 +6,7 @@
- Basic usage
- Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the counterpart data of following columns. Here is an example.
+ Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the corresponding data of following columns. Here is an example.
```html
Cascade Picker
@@ -67,7 +67,7 @@
}
}
```
- When first column is on `Fruit`, the options of second column are `Apple` and `Orange`. And so on, when second column is on `Orange`, the options of third column are `Three` and `Four`.
+ When the first column goes to `Fruit`, the data of second column are `Apple` and `Orange`. And when the second column goes to on `Orange`, the data of third column are `Three` and `Four`.
- Province-city-area Picker
@@ -110,7 +110,7 @@
- Date Picker
- It's same to date picker. Just construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
+ As same as province-city-area picker, you just need to construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
```html
Date Picker
@@ -175,7 +175,7 @@
}
}
```
- One more thing, although `setData` is available when visible. But considering user experience, it is demand to maintain the number of column unchanging when the picker is visible.
+ One more thing, although `setData` is available when visible. But considering user experience, you can't change the number of column when the picker is visible.
### Props configuration
@@ -183,7 +183,7 @@
| - | - | - | - | - |
| title | title | String | '' | - |
| data | the cascading data used to init option items | Array | [] | - |
-| selectIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| selectedIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
* `data` sub configuration
diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md
index 97f90ee3d3cbee18454579c15b052aca69e887ed..9d93d5cb5d34cc0ff41faf05bd739da8667e981d 100644
--- a/document/components/docs/en-US/picker.md
+++ b/document/components/docs/en-US/picker.md
@@ -88,76 +88,6 @@
`data` receives an array, whose length determines the columns of `picker`.
-- Linkage Picker
-
- ```html
- Linkage Picker
- ```
- ```js
- import { provinceList, cityList, areaList } from '../data/area'
-
- export default {
- data () {
- return {
- tempIndex: [0, 0, 0]
- }
- },
- mounted () {
- this.picker = this.$createPicker({
- title: 'Linkage Picker',
- data: this.linkageData,
- onChange: (i, newIndex) => {
- if (newIndex !== this.tempIndex[i]) {
- for (let j = 2; j > i; j--) {
- this.tempIndex.splice(j, 1, 0)
- this.linkagePicker.scrollTo(j, 0)
- }
-
- this.tempIndex.splice(i, 1, newIndex)
- this.linkagePicker.setData(this.linkageData, this.tempIndex)
- }
- },
- onSelect: (selectedVal, selectedIndex, selectedText) => {
- this.$createDialog({
- type: 'warn',
- content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
- icon: 'cubeic-alert'
- }).show()
- },
- onCancel: () => {
- this.$createToast({
- type: 'correct',
- txt: 'Picker canceled',
- time: 1000
- }).show()
- }
- })
- },
- watch: {
- linkageData() {
- this.picker.refresh()
- }
- },
- computed: {
- linkageData() {
- const provinces = provinceList
- const cities = cityList[provinces[this.tempIndex[0]].value]
- const areas = areaList[cities[this.tempIndex[1]].value]
-
- return [provinces, cities, areas]
- }
- },
- methods: {
- showPicker () {
- this.picker.show()
- }
- }
- }
- ```
-
- By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors.
-
- Instance method `setData`
```html
@@ -202,50 +132,6 @@
```
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.
-
-- Extended component: Date Picker
-
- 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.
-
- ```html
- Date Picker
- ```
- ```js
- import Vue from 'vue'
- import createAPI from '@/modules/create-api'
- import DatePicker from 'example/components/date-picker.vue'
-
- createAPI(Vue, DatePicker, ['select', 'cancel'], false)
-
- export default {
- mounted () {
- this.datePicker = this.$createDatePicker({
- min: [2008, 8, 8],
- max: [2020, 10, 20],
- onSelect: (selectedVal, selectedIndex, selectedText) => {
- this.$createDialog({
- type: 'warn',
- content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
- icon: 'cubeic-alert'
- }).show()
- },
- onCancel: () => {
- this.$createToast({
- type: 'correct',
- txt: 'Picker canceled',
- time: 1000
- }).show()
- }
- })
- },
- methods: {
- showDatePicker () {
- this.datePicker.show()
- }
- }
- }
- ```
### Props configuration
@@ -255,7 +141,7 @@
| data | data that passed into picker, whose length determines the columns of picker | Array | [] | - |
| cancelTxt | the text of the left button in picker | String | '取消' | - |
| confirmTxt | the text of the right button in picker | String | '确定' | - |
-| selectIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| selectedIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
* `data` sub configuration
diff --git a/document/components/docs/zh-CN/cascade-picker.md b/document/components/docs/zh-CN/cascade-picker.md
index 88bf88fda9b3283282a362714f4751ae0281401e..2a6a230bb4810d7bd27fec84f0739e1630de8d37 100644
--- a/document/components/docs/zh-CN/cascade-picker.md
+++ b/document/components/docs/zh-CN/cascade-picker.md
@@ -183,7 +183,7 @@
| - | - | - | - | - |
| title | 标题 | String | '' | - |
| data | 级联选择器的树形数据,用于初始化选项 | Array | [] | - |
-| selectIndex | 被选中的索引值,拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
+| selectedIndex | 被选中的索引值,拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
* `data`子配置项
diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md
index 5ac21536c972e41d5ce2145c997bc447dd5d3db0..c8673b49a99151cee89141838b84a52a997a9a87 100644
--- a/document/components/docs/zh-CN/picker.md
+++ b/document/components/docs/zh-CN/picker.md
@@ -88,76 +88,6 @@
`data`字段接收一个数组,其长度决定了`picker`的列数。
-- 联动选择器
-
- ```html
- Linkage Picker
- ```
- ```js
- import { provinceList, cityList, areaList } from '../data/area'
-
- export default {
- data () {
- return {
- tempIndex: [0, 0, 0]
- }
- },
- mounted () {
- this.picker = this.$createPicker({
- title: 'Linkage Picker',
- data: this.linkageData,
- onChange: (i, newIndex) => {
- if (newIndex !== this.tempIndex[i]) {
- for (let j = 2; j > i; j--) {
- this.tempIndex.splice(j, 1, 0)
- this.linkagePicker.scrollTo(j, 0)
- }
-
- this.tempIndex.splice(i, 1, newIndex)
- this.linkagePicker.setData(this.linkageData, this.tempIndex)
- }
- },
- onSelect: (selectedVal, selectedIndex, selectedText) => {
- this.$createDialog({
- type: 'warn',
- content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
- icon: 'cubeic-alert'
- }).show()
- },
- onCancel: () => {
- this.$createToast({
- type: 'correct',
- txt: 'Picker canceled',
- time: 1000
- }).show()
- }
- })
- },
- watch: {
- linkageData() {
- this.picker.refresh()
- }
- },
- computed: {
- linkageData() {
- const provinces = provinceList
- const cities = cityList[provinces[this.tempIndex[0]].value]
- const areas = areaList[cities[this.tempIndex[1]].value]
-
- return [provinces, cities, areas]
- }
- },
- methods: {
- showPicker () {
- this.picker.show()
- }
- }
- }
- ```
-
- 通过监听每个滚轴触发的`change`事件,然后调用`setData`方法去动态设置相关联的滚轴的值来完成联动选择的功能。
-
- 实例方法 `setData`
```html
@@ -203,50 +133,6 @@
实例方法`setData`可接受2个参数,都为数组类型。第一个参数为滚轴需要显示的数据,第二个参数为选中值的索引。
-- 扩展组件:日期选择器
-
- 除了直接调用,我们还可以基于扩展 Picker 组件扩展出很多常用的选择器,如日期选择器、时间选择器。对于扩展的选择器组件,我们依然推荐以 API 的形式调用,以日期选择器为例,首先基于 Picker 组件二次封装一个 DatePicker 组件([源码](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)),然后对该组件`createAPI`后,便可如下使用。
-
- ```html
- Date Picker
- ```
- ```js
- import Vue from 'vue'
- import createAPI from '@/modules/create-api'
- import DatePicker from 'example/components/date-picker.vue'
-
- createAPI(Vue, DatePicker, ['select', 'cancel'], false)
-
- export default {
- mounted () {
- this.datePicker = this.$createDatePicker({
- min: [2008, 8, 8],
- max: [2020, 10, 20],
- onSelect: (selectedVal, selectedIndex, selectedText) => {
- this.$createDialog({
- type: 'warn',
- content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
- icon: 'cubeic-alert'
- }).show()
- },
- onCancel: () => {
- this.$createToast({
- type: 'correct',
- txt: 'Picker canceled',
- time: 1000
- }).show()
- }
- })
- },
- methods: {
- showDatePicker () {
- this.datePicker.show()
- }
- }
- }
- ```
-
### Props 配置
| 参数 | 说明 | 类型 | 默认值 | 示例 |
@@ -255,7 +141,7 @@
| data | 传入picker数据,数组的长度决定了picker的列数 | Array | [] | - |
| cancelTxt | picker左侧按钮文案 | String | '取消' | - |
| confirmTxt | picker右侧按钮文案 | String | '确定' | - |
-| selectIndex | 被选中的索引值,拉起picker后显示这个索引值对应的内容 | Array | [] | [1] |
+| selectedIndex | 被选中的索引值,拉起picker后显示这个索引值对应的内容 | Array | [] | [1] |
* `data`子配置项