diff --git a/document/common/config/menu.json b/document/common/config/menu.json
index 5bd811511eae144d16b31dd00020e9ba84891111..49c32c055fb5bc897f6ae6490cd4b26a5aba2a9e 100644
--- a/document/common/config/menu.json
+++ b/document/common/config/menu.json
@@ -47,6 +47,7 @@
"picker": "Picker",
"cascade-picker": "CascadePicker",
"time-picker": "TimePicker",
+ "segment-picker": "SegmentPicker",
"dialog": "Dialog",
"action-sheet": "ActionSheet",
"drawer": "Drawer"
diff --git a/document/components/docs/en-US/segment-picker.md b/document/components/docs/en-US/segment-picker.md
new file mode 100644
index 0000000000000000000000000000000000000000..39589364fca81f96c433cc5167430d0fea4109fd
--- /dev/null
+++ b/document/components/docs/en-US/segment-picker.md
@@ -0,0 +1,151 @@
+## SegmentPicker
+
+SegmentPicker is used to achieve multi segment choose, for example, the choose of time period: September 1, 2010 - 2014 June 30th.
+
+### Example
+
+- Basic usage
+
+ Using the `data` attribute to define the component name and properties of each node picker, `is` represents which Picker component is used, either a Picker component of a Cube UI, or a Picker component defined by yourself. For example, we use two DatePicker components to make time period choose.
+
+ ```html
+ StartDate - EndDate
+ ```
+ ```js
+ const dateSegmentData = [
+ {
+ is: 'cube-date-picker',
+ title: '入学时间',
+ min: new Date(2000, 0, 1),
+ max: new Date(2030, 11, 31)
+ },
+ {
+ is: 'cube-date-picker',
+ title: '毕业时间',
+ min: new Date(2000, 0, 1),
+ max: new Date(2030, 11, 31)
+ }
+ ]
+
+ export default {
+ mounted () {
+ this.dateSegmentPicker = this.$createSegmentPicker({
+ data: dateSegmentData,
+ onSelect: (selectedDates, selectedVals, selectedTexts) => {
+ this.$createDialog({
+ type: 'warn',
+ content: `Selected Items:
- 入学时间: ${selectedTexts[0].join('')}
- 毕业时间: ${selectedTexts[1].join('')}`,
+ icon: 'cubeic-alert'
+ }).show()
+ },
+ onNext: (i, selectedDate, selectedValue, selectedText) => {
+ dateSegmentData[1].min = selectedDate
+ if (i === 0) {
+ this.dateSegmentPicker.$updateProps({
+ data: dateSegmentData
+ })
+ }
+ }
+ })
+ },
+ methods: {
+ showDateSegmentPicker() {
+ this.dateSegmentPicker.show()
+ }
+ }
+ }
+ ```
+
+ In order to implement the Cascade between the two pickers, we can update the second picker in the handle function of the `next` event, according to the first choice. As in here, the minimum value of the end time = the selected start time.
+
+- Express - From - To
+
+ ```html
+ Express - From - To
+ ```
+ ```js
+ import { provinceList, cityList, areaList } from 'example/data/area'
+
+ const cityData = provinceList
+ cityData.forEach(province => {
+ province.children = cityList[province.value]
+ province.children.forEach(city => {
+ city.children = areaList[city.value]
+ })
+ })
+
+ export default {
+ mounted () {
+ this.citySegmentPicker = this.$createSegmentPicker({
+ data: [{
+ title: '选择快递',
+ data: [expressData],
+ selectedIndex: [1]
+ }, {
+ is: 'cube-cascade-picker',
+ title: '寄件地址',
+ data: cityData,
+ selectedIndex: [0, 0, 0],
+ cancelTxt: '返回'
+ }, {
+ is: 'cube-cascade-picker',
+ title: '收件地址',
+ data: cityData,
+ selectedIndex: [0, 0, 0]
+ }],
+ cancelTxt: 'Cancel',
+ confirmTxt: 'Confirm',
+ nextTxt: 'Next',
+ prevTxt: 'Prev',
+ onSelect: (selectedVals, selectedIndexs, selectedTexts) => {
+ this.$createDialog({
+ type: 'warn',
+ content: `Selected Items:
- 所选快递: ${selectedTexts[0].join('')}
- 寄件地址: ${selectedTexts[1].join('')}
- 收件地址: ${selectedTexts[2].join('')}`,
+ icon: 'cubeic-alert'
+ }).show()
+ }
+ })
+ },
+ methods: {
+ showCitySegmentPicker() {
+ this.citySegmentPicker.show()
+ }
+ }
+ }
+ ```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| data | define the component name and properties of each node picker | Array | [] | - |
+| title | title | String | '' | - |
+| cancelTxt | the text of the cancel button | String | '取消' | - |
+| confirmTxt | the text of the confirm button | String | '确定' | - |
+| nextTxt | the text of the next button | String | '下一步' | - |
+| prevTxt | the text of the prev button | String | '下一步' | - |
+
+* `data` sub configuration
+
+| Attribute | Description | Type | Default | Example |
+| - | - | - | - | - |
+| is | the component name of each node picker | String | cube-picker | cube-date-picker |
+| ...rest | the properties of each node picker | - | - | - |
+
+### Events
+
+| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
+| - | - | - | - | - |
+| select | triggers when clicking the confirm button | the parameter 1 of each picker's select event, Array | the parameter 2 of each picker's select event, Array | the parameter 3 of each picker's select event, Array |
+| cancel | triggers when clicking the cancel button | - | - | - |
+| next | triggers when clicking the next button | the index of current picker, Number | ...rest, is the parameters of current picker's select event | ··· | ··· |
+| prev | triggers when clicking the prev button | the index of current picker, Number | - | - | - |
+| change | triggers when the roller scrolls | pickerIndex: Number, the index of current picker | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column |
+
+
+### Methods
+
+| Method name | Description |
+| - | - |
+| show | show picker |
+| hide | hide picker |
diff --git a/document/components/docs/zh-CN/segment-picker.md b/document/components/docs/zh-CN/segment-picker.md
index 0a177bf69d157e9777189d2307e8a684f5a59415..9b19916c36ebbe13a0c01cec1f62f23cf23867b4 100644
--- a/document/components/docs/zh-CN/segment-picker.md
+++ b/document/components/docs/zh-CN/segment-picker.md
@@ -1,6 +1,6 @@
## SegmentPicker 组件
-段选择器,用于实现多段的选择,比如选择时间段:2010年9月1日-1014年6月30日。
+段选择器,用于实现多段的选择,比如选择时间段:2010年9月1日 - 2014年6月30日。
### 示例
@@ -119,14 +119,13 @@
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
| data | 定义各个选择器的组件名和属性 | Array | [] | - |
-| selectedIndex | 被选中的索引值,拉起 picker 后显示这个索引值对应的内容 | Array | [] | [1] |
| title | 标题 | String | '' | - |
| cancelTxt | 取消按钮文案 | String | '取消' | - |
| confirmTxt | 确定按钮文案 | String | '确定' | - |
| nextTxt | 下一步按钮文案 | String | '下一步' | - |
| prevTxt | 上一步按钮文案 | String | '下一步' | - |
-* `data`子配置项
+* `data` 子配置项
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |