diff --git a/document/components/docs/en-US/cascade-picker.md b/document/components/docs/en-US/cascade-picker.md
index 6f9379df73f4ce8f485c3a0c7a47f30fdb346638..379547af2a18084fe58721b0f295b322e98bf8b2 100644
--- a/document/components/docs/en-US/cascade-picker.md
+++ b/document/components/docs/en-US/cascade-picker.md
@@ -222,9 +222,10 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
-| title | title | String | '' | - |
| data | the cascading data used to init option items | Array | [] | - |
| selectedIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| title | title | String | '' | - |
+| subtitle1.8.1 | subtitle | String | '' | - |
| cancelTxt | the text of the cancel button | String | '取消' | - |
| confirmTxt | the text of the confirm button | String | '确定' | - |
| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |
diff --git a/document/components/docs/en-US/date-picker.md b/document/components/docs/en-US/date-picker.md
index ffa1c45f73279e673afd54330bfd5f88871b2c28..d4d54fa308c8ff1b8474118af0439a0bfd720312 100644
--- a/document/components/docs/en-US/date-picker.md
+++ b/document/components/docs/en-US/date-picker.md
@@ -242,6 +242,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
| columnCount | the count of column | Number | - | 3 | 6 |
| format1.8.0+ | date format | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
| title | title | String | - | '' | - |
+| subtitle1.8.1 | subtitle | String | - | '' | - |
| cancelTxt | the text of the cancel button | String | - | '取消' | - |
| confirmTxt | the text of the confirm button | String | - | '确定' | - |
| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | - | 2500 | - |
diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md
index 2bac15c59c1f6e617259afa255d1a2dc08959356..0e8a0c19a4bc684a6ffa2bde93db55f92b218ec3 100644
--- a/document/components/docs/en-US/picker.md
+++ b/document/components/docs/en-US/picker.md
@@ -177,13 +177,56 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
}
```
+- Subtitle
+
+ You could configure subtitle by the property `subtitle`.
+
+ ```html
+ Use subtitle
+ ```
+ ```js
+ const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
+ { text: '幽鬼', value: '幽鬼' }]
+ export default {
+ mounted () {
+ this.subtitlePicker = this.$createPicker({
+ title: 'Picker',
+ subtitle: 'subtitle',
+ data: [col1Data],
+ onSelect: this.selectHandle,
+ onCancel: this.cancelHandle
+ })
+ },
+ methods: {
+ showSubtitlePicker () {
+ this.subtitlePicker.show()
+ },
+ selectHandle(selectedVal, selectedIndex, selectedText) {
+ this.$createDialog({
+ type: 'warn',
+ content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
+ icon: 'cubeic-alert'
+ }).show()
+ },
+ cancelHandle() {
+ this.$createToast({
+ type: 'correct',
+ txt: 'Picker canceled',
+ time: 1000
+ }).show()
+ }
+ }
+ }
+ ```
+
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
-| title | title | String | '' | - |
| data | data that passed into picker, whose length determines the columns of picker | Array | [] | - |
| selectedIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| title | title | String | '' | - |
+| subtitle1.8.1 | subtitle | String | '' | - |
| cancelTxt | the text of the cancel button | String | '取消' | - |
| confirmTxt | the text of the confirm button | String | '确定' | - |
| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |
diff --git a/document/components/docs/en-US/segment-picker.md b/document/components/docs/en-US/segment-picker.md
index 872bf937a0c70321aee44c8d345d27f5ef762995..b726ffaf081b94096b48796a0faac830c8cc75de 100644
--- a/document/components/docs/en-US/segment-picker.md
+++ b/document/components/docs/en-US/segment-picker.md
@@ -124,6 +124,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
| - | - | - | - | - |
| data | define the component name and properties of each node picker | Array | [] | - |
| title | title | String | '' | - |
+| subtitle1.8.1 | subtitle | 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 | '下一步' | - |
diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md
index 46be554fed8f8ad5bb895493fc350490ab4ff8ca..f4977bc597e72af8e4d9cf96c512131b9572993b 100644
--- a/document/components/docs/en-US/time-picker.md
+++ b/document/components/docs/en-US/time-picker.md
@@ -148,6 +148,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
| showNow | whether to display current time | Boolean | true |
| minuteStep | step of the minute | Number | 10 |
| title | title | String | '选择时间' |
+| subtitle1.8.1 | subtitle | String | '' |
| cancelTxt1.8.1 | the text of the cancel button | String | '取消' |
| confirmTxt1.8.1 | the text of the confirm button | String | '确定' |
| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 |
diff --git a/document/components/docs/zh-CN/cascade-picker.md b/document/components/docs/zh-CN/cascade-picker.md
index 79acd849551bf9878a4750751885d4769b3ac8b7..1ed107fb5cd42c1c222b98cde1b984941c1f5296 100644
--- a/document/components/docs/zh-CN/cascade-picker.md
+++ b/document/components/docs/zh-CN/cascade-picker.md
@@ -212,9 +212,10 @@ __注:__ 由于此组件基于 create-api 实现,所以在使用之前,请
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
-| title | 标题 | String | '' | - |
| data | 级联选择器的树形数据,用于初始化选项 | Array | [] | - |
| selectedIndex | 被选中的索引值,拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
+| title | 标题 | String | '' | - |
+| subtitle1.8.1 | 副标题 | String | '' | - |
| cancelTxt | 取消按钮文案 | String | '取消' | - |
| confirmTxt | 确定按钮文案 | String | '确定' | - |
| swipeTime | 快速滑动选择器滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 | - |
diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md
index 25557ae3ccc62fe5213db04b3c84686a292705d2..4b050d61412cfad390ad434f20490dced325882b 100644
--- a/document/components/docs/zh-CN/date-picker.md
+++ b/document/components/docs/zh-CN/date-picker.md
@@ -242,6 +242,7 @@ __注:__ 由于此组件基于 create-api 实现,所以在使用之前,请
| columnCount | 列数 | Number | - | 3 | 6 |
| format1.8.0+ | 日期格式 | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
| title | 标题 | String | - | '' | '时间选择' |
+| subtitle1.8.1 | 副标题 | String | - | '' | - |
| cancelTxt | 取消按钮文案 | String | - | '取消' | '返回' |
| confirmTxt | 确定按钮文案 | String | - | '确定' | '选择' |
| swipeTime | 快速滑动选择器滚轮时,惯性滚动动画的时长,单位:ms | Number | - | 2500 | - |
diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md
index 3c2fe24d3cfb6da47a17707afd5c4c63bcc805ce..002bf3f032065c3b10c73ece153cb0d7ea85e5f5 100644
--- a/document/components/docs/zh-CN/picker.md
+++ b/document/components/docs/zh-CN/picker.md
@@ -177,13 +177,56 @@ __注:__ 由于此组件基于 create-api 实现,所以在使用之前,请
实例方法`setData`可接受2个参数,都为数组类型。第一个参数为滚轴需要显示的数据,第二个参数为选中值的索引。
+- 副标题
+
+ 通过 `subtitle` 属性,设置副标题。
+
+ ```html
+ Use subtitle
+ ```
+ ```js
+ const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
+ { text: '幽鬼', value: '幽鬼' }]
+ export default {
+ mounted () {
+ this.subtitlePicker = this.$createPicker({
+ title: 'Picker',
+ subtitle: 'subtitle',
+ data: [col1Data],
+ onSelect: this.selectHandle,
+ onCancel: this.cancelHandle
+ })
+ },
+ methods: {
+ showSubtitlePicker () {
+ this.subtitlePicker.show()
+ },
+ selectHandle(selectedVal, selectedIndex, selectedText) {
+ this.$createDialog({
+ type: 'warn',
+ content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`,
+ icon: 'cubeic-alert'
+ }).show()
+ },
+ cancelHandle() {
+ this.$createToast({
+ type: 'correct',
+ txt: 'Picker canceled',
+ time: 1000
+ }).show()
+ }
+ }
+ }
+ ```
+
### Props 配置
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
-| title | 标题 | String | '' | - |
| data | 传入 picker 数据,数组的长度决定了 picker 的列数 | Array | [] | - |
| selectedIndex | 被选中的索引值,拉起 picker 后显示这个索引值对应的内容 | Array | [] | [1] |
+| title | 标题 | String | '' | - |
+| subtitle1.8.1 | 副标题 | String | '' | - |
| cancelTxt | 取消按钮文案 | String | '取消' | - |
| confirmTxt | 确定按钮文案 | String | '确定' | - |
| swipeTime | 快速滑动 picker 滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 | - |
diff --git a/document/components/docs/zh-CN/segment-picker.md b/document/components/docs/zh-CN/segment-picker.md
index 2ce9602815946b47a13fa1e25608e24700a90dba..c960ef339669e86f57b865695f566afa97cf2908 100644
--- a/document/components/docs/zh-CN/segment-picker.md
+++ b/document/components/docs/zh-CN/segment-picker.md
@@ -126,6 +126,7 @@ __注:__ 由于此组件基于 create-api 实现,所以在使用之前,请
| nextTxt | 下一步按钮文案 | String | '下一步' | - |
| prevTxt | 上一步按钮文案 | String | '下一步' | - |
| title | 标题 | String | '' | - |
+| subtitle1.8.1 | 副标题 | String | '' | - |
| cancelTxt | 取消按钮文案 | String | '取消' | - |
| confirmTxt | 确定按钮文案 | String | '确定' | - |
| swipeTime1.8.1 | 快速滑动选择器滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 | - |
diff --git a/document/components/docs/zh-CN/time-picker.md b/document/components/docs/zh-CN/time-picker.md
index b03bd3561c7c0908ee266fb7b24cc2c785ba70f8..37e302e431e74d08001c1f2ec4f4fb24edd63268 100644
--- a/document/components/docs/zh-CN/time-picker.md
+++ b/document/components/docs/zh-CN/time-picker.md
@@ -138,6 +138,7 @@ __注:__ 由于此组件基于 create-api 实现,所以在使用之前,请
| showNow | 是否显示当前时间 | Boolean | true |
| minuteStep | 分钟数的步长 | Number | 10 |
| title | 标题 | String | '选择时间' |
+| subtitle1.8.1 | 副标题 | String | '' |
| cancelTxt1.8.1 | 取消按钮文案 | String | '取消' |
| confirmTxt1.8.1 | 确定按钮文案 | String | '确定' |
| swipeTime | 快速滑动选择器滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 |
diff --git a/example/components/normal-time-picker.vue b/example/components/normal-time-picker.vue
deleted file mode 100644
index 8fa649eb49034d165aa350fc405b958115ebb2fe..0000000000000000000000000000000000000000
--- a/example/components/normal-time-picker.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
-
-
-
-
diff --git a/example/pages/picker.vue b/example/pages/picker.vue
index 25f17fc968695d99dcff587c74c50a42c6198511..ba5f885aa9ecc30119c2abb3055f3fc8bed0ec68 100644
--- a/example/pages/picker.vue
+++ b/example/pages/picker.vue
@@ -7,7 +7,7 @@
Use alias
Use setData
Use $updateProps
- Normal Time Picker
+ Use subtitle
@@ -16,12 +16,7 @@