From e7e81b9e5496b9ea9ad2a1dbdd36c53f6345620e Mon Sep 17 00:00:00 2001 From: AmyFoxFN Date: Sun, 8 Apr 2018 12:34:25 +0800 Subject: [PATCH] docs(segment-picker): english --- document/common/config/menu.json | 1 + .../components/docs/en-US/segment-picker.md | 151 ++++++++++++++++++ .../components/docs/zh-CN/segment-picker.md | 5 +- 3 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 document/components/docs/en-US/segment-picker.md diff --git a/document/common/config/menu.json b/document/common/config/menu.json index 5bd81151..49c32c05 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 00000000..39589364 --- /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 0a177bf6..9b19916c 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` 子配置项 | 参数 | 说明 | 类型 | 默认值 | 示例 | | - | - | - | - | - | -- GitLab