[feat] Picker-based: subtitle (#174)

* [feat]picker-based: subtitle

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 | '' | - |
+| subtitle<sup>1.8.1</sup> | 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 | - |

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 |
 | format<sup>1.8.0+</sup> | date format | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
 | title | title | String | - | '' | - |
+| subtitle<sup>1.8.1</sup> | 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 | - |

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
+  <cube-button @click="showSubtitlePicker">Use subtitle</cube-button>
+  ```
+  ```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: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - 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 | '' | - |
+| subtitle<sup>1.8.1</sup> | 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 | - |

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 | '' | - |
+| subtitle<sup>1.8.1</sup> | 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 | '下一步' | - |

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 | '选择时间' |
+| subtitle<sup>1.8.1</sup> | subtitle | String | '' |
 | cancelTxt<sup>1.8.1</sup> | the text of the cancel button | String | '取消' |
 | confirmTxt<sup>1.8.1</sup> | 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 |

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

@@ -212,9 +212,10 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 参数 | 说明 | 类型 | 默认值 | 示例 |
 | - | - | - | - | - |
-| title | 标题 | String | '' | - |
 | data | 级联选择器的树形数据，用于初始化选项 | Array | [] | - |
 | selectedIndex | 被选中的索引值，拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
+| title | 标题 | String | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

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

@@ -242,6 +242,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | columnCount | 列数 | Number | - | 3 | 6 |
 | format<sup>1.8.0+</sup> | 日期格式 | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
 | title | 标题 | String | - | '' | '时间选择' |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | - | '' | - |
 | cancelTxt | 取消按钮文案 | String | - | '取消' | '返回' |
 | confirmTxt | 确定按钮文案 | String | - | '确定' | '选择' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | - | 2500 | - |

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

@@ -177,13 +177,56 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
   实例方法`setData`可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。
 
+- 副标题
+
+  通过 `subtitle` 属性，设置副标题。
+
+  ```html
+  <cube-button @click="showSubtitlePicker">Use subtitle</cube-button>
+  ```
+  ```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: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - 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 | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动 picker 滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

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

@@ -126,6 +126,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | nextTxt | 下一步按钮文案 | String | '下一步' | - |
 | prevTxt | 上一步按钮文案 | String | '下一步' | - |
 | title | 标题 | String | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime<sup>1.8.1</sup> | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

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

@@ -138,6 +138,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | showNow | 是否显示当前时间 | Boolean | true |
 | minuteStep | 分钟数的步长 | Number | 10 |
 | title | 标题 | String | '选择时间' |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' |
 | cancelTxt<sup>1.8.1</sup> | 取消按钮文案 | String | '取消' |
 | confirmTxt<sup>1.8.1</sup> | 确定按钮文案 | String | '确定' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 |

example/components/normal-time-picker.vue

-<template>
-  <cube-picker
-    ref="picker"
-    title="Choose Time"
-    :data="timeData"
-    :selectedIndex="selectedIndex"
-    @select="select"
-    @cancel="cancel">
-  </cube-picker>
-</template>
-
-<script>
-  const COMPONENT_NAME = 'normal-time-picker'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      selectedIndex: {
-        type: Array,
-        default() {
-          return [0, 0, 0]
-        }
-      }
-    },
-    data() {
-      return {
-        timeData: [range(0, 23, true, '点'), range(0, 59, true, '分'), range(0, 59, true, '秒')]
-      }
-    },
-    methods: {
-      show() {
-        this.$refs.picker.show()
-      },
-      hide() {
-        this.$refs.picker.hide()
-      },
-      select(selectedVal, selectedIndex, selectedText) {
-        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
-      },
-      cancel() {
-        this.$emit(EVENT_CANCEL)
-      }
-    }
-  }
-
-  function range(n, m, polyfill = false, unit = '') {
-    let arr = []
-    for (let i = n; i <= m; i++) {
-      let value = (polyfill && i < 10 ? '0' + i : i) + unit
-      arr.push({
-        text: value,
-        value: i
-      })
-    }
-    return arr
-  }
-</script>

example/pages/picker.vue

@@ -7,7 +7,7 @@
         <cube-button @click="showAliasPicker">Use alias</cube-button>
         <cube-button @click="showSetDataPicker">Use setData</cube-button>
         <cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
-        <cube-button @click="showNormalTimePicker">Normal Time Picker</cube-button>
+        <cube-button @click="showSubtitlePicker">Use subtitle</cube-button>
       </cube-button-group>
     </div>
   </cube-page>
@@ -16,12 +16,7 @@
 <script type="text/ecmascript-6">
   import CubePage from 'example/components/cube-page.vue'
   import CubeButtonGroup from 'example/components/cube-button-group.vue'
-  import NormalTimePicker from 'example/components/normal-time-picker.vue'
   import { data1, data2, data3 } from 'example/data/picker'
-  import Vue from 'vue'
-  import createAPI from '@/modules/create-api'
-
-  createAPI(Vue, NormalTimePicker, ['select', 'cancel'], false)
 
   export default {
     mounted() {
@@ -64,8 +59,10 @@
         onCancel: this.cancelHandle
       })
 
-      this.normalTimePicker = this.$createNormalTimePicker({
-        selectedIndex: [10, 20, 59],
+      this.subtitlePicker = this.$createPicker({
+        title: 'Picker',
+        subtitle: 'subtitle',
+        data: [data1],
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
@@ -94,8 +91,8 @@
           })
         }, 1000)
       },
-      showNormalTimePicker() {
-        this.normalTimePicker.show()
+      showSubtitlePicker() {
+        this.subtitlePicker.show()
       },
       selectHandle(selectedVal, selectedIndex, selectedText) {
         this.$createDialog({

src/common/mixins/picker.js

@@ -3,6 +3,9 @@ export default {
     title: {
       type: String
     },
+    subtitle: {
+      type: String
+    },
     cancelTxt: {
       type: String,
       default: '取消'

src/common/stylus/theme/default.styl

@@ -108,6 +108,7 @@ $index-list-nav-active-color := $color-orange
 // picker
 $picker-bgc := $color-white
 $picker-title-color := $color-dark-grey
+$picker-subtitle-color := $color-light-grey
 $picker-confirm-btn-color := $color-orange
 $picker-confirm-btn-active-color := $color-light-orange
 $picker-cancel-btn-color := $color-light-grey

src/components/cascade-picker/cascade-picker.vue

@@ -5,6 +5,7 @@
       :data="pickerData"
       :selected-index="pickerSelectedIndex"
       :title="title"
+      :subtitle="subtitle"
       :z-index="zIndex"
       :cancel-txt="cancelTxt"
       :confirm-txt="confirmTxt"

src/components/date-picker/date-picker.vue

@@ -4,6 +4,7 @@
     :data="data"
     :selectedIndex="selectedIndex"
     :title="title"
+    :subtitle="subtitle"
     :cancel-txt="cancelTxt"
     :confirm-txt="confirmTxt"
     :swipe-time="swipeTime"

src/components/picker/picker.vue

 <template>
   <transition name="cube-picker-fade">
-    <!-- If use v-model to toggle the popup, it will have a micro-delay caused by vue watch, so that the animation will be broken. -->
-    <!-- So we keep the v-model true and use v-show to toggle the popup. -->
+    <!-- Transition animation need use with v-show in the same template. -->
     <cube-popup
       type="picker"
       :mask="true"
@@ -13,21 +12,27 @@
       <transition name="cube-picker-move">
         <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
           <div class="cube-picker-choose border-bottom-1px">
-            <span data-action="cancel" @click="cancel">{{cancelTxt}}</span>
-            <span data-action="confirm" @click="confirm">{{confirmTxt}}</span>
-            <h1>{{title}}</h1>
+            <span class="cube-picker-cancel" @click="cancel">{{cancelTxt}}</span>
+            <div class="cube-picker-title-group">
+              <h1 class="cube-picker-title">{{title}}</h1>
+              <h2 v-if="subtitle" class="cube-picker-subtitle">{{subtitle}}</h2>
+            </div>
+            <span class="cube-picker-confirm" @click="confirm">{{confirmTxt}}</span>
           </div>
+
           <div class="cube-picker-content">
             <i class="border-bottom-1px"></i>
             <i class="border-top-1px"></i>
             <div class="cube-picker-wheel-wrapper" ref="wheelWrapper">
               <div v-for="(data,index) in pickerData" :key="index">
-                <ul class="wheel-scroll">
-                  <li v-for="(item,index) in data" class="wheel-item" :key="index">{{item[textKey]}}</li>
+                <!-- The class name of the ul and li need be configured to BetterScroll. -->
+                <ul class="cube-picker-wheel-scroll">
+                  <li v-for="(item,index) in data" class="cube-picker-wheel-item" :key="index">{{item[textKey]}}</li>
                 </ul>
               </div>
             </div>
           </div>
+
           <div class="cube-picker-footer"></div>
         </div>
       </transition>
@@ -178,7 +183,7 @@
       },
       refillColumn(index, data) {
         const wheelWrapper = this.$refs.wheelWrapper
-        let scroll = wheelWrapper.children[index].querySelector('.wheel-scroll')
+        let scroll = wheelWrapper.children[index].querySelector('.cube-picker-wheel-scroll')
         let wheel = this.wheels ? this.wheels[index] : false
         let dist = 0
         if (scroll && wheel) {
@@ -219,7 +224,9 @@
         if (!this.wheels[i]) {
           const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
             wheel: {
-              selectedIndex: this.pickerSelectedIndex[i] || 0
+              selectedIndex: this.pickerSelectedIndex[i] || 0,
+              wheelWrapperClass: 'cube-picker-wheel-scroll',
+              wheelItemClass: 'cube-picker-wheel-item'
             },
             swipeTime: this.swipeTime,
             observeDOM: false
@@ -279,29 +286,44 @@
 
   .cube-picker-choose
     position: relative
+    display: flex
     height: 60px
-    > span
-      position: absolute
-      top: 6px
-      padding: 16px $picker-lr-padding
-      font-size: $fontsize-medium
-    > [data-action="confirm"]
-      right: 0
-      color: $picker-confirm-btn-color
-      &:active
-        color: $picker-confirm-btn-active-color
-    > [data-action="cancel"]
-      left: 0
-      color: $picker-cancel-btn-color
-      &:active
-        color: $picker-cancel-btn-active-color
-    > h1
-      margin: 0
-      line-height: 60px
-      text-align: center
-      font-weight: normal
-      font-size: $fontsize-large-x
-      color: $picker-title-color
+
+  .cube-picker-confirm, .cube-picker-cancel
+    font-size: $fontsize-medium
+    line-height: 60px
+    padding: 0 $picker-lr-padding
+    font-size: $fontsize-medium
+
+  .cube-picker-confirm
+    color: $picker-confirm-btn-color
+    &:active
+      color: $picker-confirm-btn-active-color
+
+  .cube-picker-cancel
+    color: $picker-cancel-btn-color
+    &:active
+      color: $picker-cancel-btn-active-color
+
+  .cube-picker-title-group
+    flex: auto
+    display: flex
+    height: 100%
+    flex-flow: column
+    justify-content: center
+    text-align: center
+
+  .cube-picker-title
+    font-size: $fontsize-large-x
+    line-height: 25px
+    font-weight: normal
+    color: $picker-title-color
+
+  .cube-picker-subtitle
+    margin-top: 2px
+    line-height: 16px
+    font-size: $fontsize-small
+    color: $picker-subtitle-color
 
   .cube-picker-content
     position: relative
@@ -330,17 +352,18 @@
       overflow: hidden
       font-size: $fontsize-large-xx
 
-  .wheel-scroll
+  .cube-picker-wheel-scroll
     padding: 0
     margin-top: 68px
     line-height: 36px
     list-style: none
-    > li
-      list-style: none
-      height: 36px
-      overflow: hidden
-      white-space: nowrap
-      color: $picker-item-color
+
+  .cube-picker-wheel-item
+    list-style: none
+    height: 36px
+    overflow: hidden
+    white-space: nowrap
+    color: $picker-item-color
 
   .cube-picker-footer
     height: 20px

src/components/segment-picker/segment-picker.vue

@@ -9,6 +9,7 @@
       ref="pickers"
       :is="item.is || 'cube-picker'"
       :title="item.title || title"
+      :subtitle="item.subtitle || subtitle"
       :confirm-txt="item.confirmTxt || (index === data.length - 1 ? confirmTxt : nextTxt)"
       :cancel-txt="item.cancelTxt || (index === 0 ? cancelTxt : prevTxt)"
       :swipe-time="item.swipeTime || swipeTime"

src/components/time-picker/time-picker.vue

@@ -5,6 +5,7 @@
     :data="data"
     :selected-index="selectedIndex"
     :title="title"
+    :subtitle="subtitle"
     :cancel-txt="cancelTxt"
     :confirm-txt="confirmTxt"
     :swipe-time="swipeTime"
@@ -70,7 +71,7 @@
           return {
             len: 3,
             filter: ['今日'],
-            format: 'M月d日'
+            format: 'M月D日'
           }
         }
       },

test/unit/specs/cascade-picker.spec.js

@@ -22,10 +22,20 @@ describe('CascadePicker', () => {
 
   it('should render correct contents', function () {
     vm = createCascadePicker({
+      title: 'title',
+      subtitle: 'subtitle',
       data: cascadeData,
       selectedIndex: [1, 1, 3]
     })
 
+    const titleEl = vm.$el.querySelector('.cube-picker-title')
+    expect(titleEl.textContent.trim())
+      .to.equal('title')
+
+    const subtitleEl = vm.$el.querySelector('.cube-picker-subtitle')
+    expect(subtitleEl.textContent.trim())
+      .to.equal('subtitle')
+
     const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
     expect(wheels.length)
       .to.equal(3)
@@ -105,14 +115,14 @@ describe('CascadePicker', () => {
           .to.be.callCount(1)
 
         // select
-        const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+        const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
         confirmBtn.click()
         expect(selectHandle)
           .to.be.callCount(1)
 
         // cancel
         vm.show()
-        const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+        const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
         cancelBtn.click()
         expect(cancelHandle)
           .to.be.callCount(1)

test/unit/specs/date-picker.spec.js

@@ -77,7 +77,7 @@ describe('DatePicker', () => {
     // test: _arrayToDate if (i < this.beginIndex)
     vm.show()
     setTimeout(() => {
-      const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+      const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
       confirmBtn.click()
       done()
     }, 50)
@@ -156,14 +156,14 @@ describe('DatePicker', () => {
           .to.be.callCount(1)
 
         // select
-        const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+        const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
         confirmBtn.click()
         expect(selectHandle)
           .to.be.callCount(1)
 
         // cancel
         vm.show()
-        const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+        const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
         cancelBtn.click()
         expect(cancelHandle)
           .to.be.callCount(1)
@@ -205,7 +205,7 @@ describe('DatePicker', () => {
 
     vm.show()
     setTimeout(() => {
-      const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+      const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
       confirmBtn.click()
       expect(selectHandle)
         .to.be.calledWith(new Date(2010, 9, 1), [2010, 10, 1], ['2010', '10', '1'])

test/unit/specs/picker.spec.js

@@ -57,17 +57,26 @@ describe('Picker', () => {
 
   it('should render correct contents', function () {
     vm = createPicker({
-      title: '两列选择器',
+      title: 'title',
+      subtitle: 'subtitle',
       data: [data1, data2],
       cancelTxt: '关闭',
       confirmTxt: '好的'
     })
 
-    const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+    const titleEl = vm.$el.querySelector('.cube-picker-title')
+    expect(titleEl.textContent.trim())
+      .to.equal('title')
+
+    const subtitleEl = vm.$el.querySelector('.cube-picker-subtitle')
+    expect(subtitleEl.textContent.trim())
+      .to.equal('subtitle')
+
+    const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
     expect(cancelBtn.textContent.trim())
       .to.equal('关闭')
 
-    const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+    const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
     expect(confirmBtn.textContent.trim())
       .to.equal('好的')
 
@@ -166,14 +175,14 @@ describe('Picker', () => {
       setTimeout(() => {
         vm.show()
         setTimeout(() => {
-          const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+          const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
           cancelBtn.click()
           expect(cancelHandle)
             .to.be.callCount(1)
 
           vm.show()
           setTimeout(() => {
-            const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+            const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
             confirmBtn.click()
             expect(selectHandle)
               .to.be.callCount(1)

test/unit/specs/segment-picker.spec.js

@@ -61,8 +61,8 @@ describe('SegmentPicker', () => {
     expect(wheels.length)
       .to.equal(7)
 
-    const cancelBtns = vm.$el.querySelectorAll('.cube-picker-choose [data-action="cancel"]')
-    const confirmBtns = vm.$el.querySelectorAll('.cube-picker-choose [data-action="confirm"]')
+    const cancelBtns = vm.$el.querySelectorAll('.cube-picker-cancel')
+    const confirmBtns = vm.$el.querySelectorAll('.cube-picker-confirm')
 
     expect(cancelBtns[0].textContent.trim())
       .to.equal('Cancel')
@@ -113,8 +113,8 @@ describe('SegmentPicker', () => {
     })
 
     const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
-    const cancelBtns = vm.$el.querySelectorAll('.cube-picker-choose [data-action="cancel"]')
-    const confirmBtns = vm.$el.querySelectorAll('.cube-picker-choose [data-action="confirm"]')
+    const cancelBtns = vm.$el.querySelectorAll('.cube-picker-cancel')
+    const confirmBtns = vm.$el.querySelectorAll('.cube-picker-confirm')
 
     // change
     vm.show()
@@ -202,7 +202,7 @@ describe('SegmentPicker', () => {
     })
 
     vm.$nextTick(() => {
-      const titles = vm.$el.querySelectorAll('.cube-picker-choose > h1')
+      const titles = vm.$el.querySelectorAll('.cube-picker-title')
       expect(titles[0].textContent.trim())
         .to.equal('Dota')
 

test/unit/specs/select.spec.js

@@ -46,9 +46,9 @@ describe('Select.vue', () => {
     vm.$parent.confirmTxt = 'confirm2'
     vm.$parent.cancelTxt = 'cancel2'
     vm.$nextTick(() => {
-      expect(vm.picker.$el.querySelector('.cube-picker-choose [data-action="cancel"]').textContent.trim())
+      expect(vm.picker.$el.querySelector('.cube-picker-cancel').textContent.trim())
         .to.equal('cancel2')
-      expect(vm.picker.$el.querySelector('.cube-picker-choose [data-action="confirm"]').textContent.trim())
+      expect(vm.picker.$el.querySelector('.cube-picker-confirm').textContent.trim())
         .to.equal('confirm2')
       expect(vm.picker.$el.querySelector('.cube-picker-choose h1').textContent.trim())
         .to.equal('title2')
@@ -72,7 +72,7 @@ describe('Select.vue', () => {
     setTimeout(() => {
       vm.picker.scrollTo(0, 1)
       setTimeout(() => {
-        const confirmBtn = document.querySelector('.cube-picker-choose [data-action="confirm"]')
+        const confirmBtn = document.querySelector('.cube-picker-confirm')
         confirmBtn.click()
         expect(changeHandle)
           .to.be.callCount(1)

test/unit/specs/time-picker.spec.js

@@ -20,11 +20,11 @@ describe('TimePicker', () => {
   it('should render correct contents', function (done) {
     vm = createPicker()
 
-    const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+    const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
     expect(cancelBtn.textContent.trim())
       .to.equal('取消')
 
-    const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+    const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
     expect(confirmBtn.textContent.trim())
       .to.equal('确定')
     vm.show()
@@ -32,24 +32,32 @@ describe('TimePicker', () => {
       const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
       expect(wheels.length)
         .to.equal(3)
+
       const firstWheelItems = wheels[0].querySelectorAll('li')
       expect(firstWheelItems.length)
         .to.equal(3)
       expect(firstWheelItems[0].textContent.trim())
         .to.equal('今日')
-      const secondWheelItem = wheels[1].querySelector('li')
-      expect(secondWheelItem.textContent.trim())
+
+      const secondWheelItems = wheels[1].querySelectorAll('li')
+      expect(secondWheelItems[0].textContent.trim())
         .to.equal('现在')
+
       vm.hide()
+
       setTimeout(() => {
-        const nextDate = +new Date(Date.now() + 24 * 60 * 60 * 1000)
-        vm.setTime(nextDate)
+        const nextDate = new Date(Date.now() + 24 * 60 * 60 * 1000)
+        vm.setTime(+nextDate)
         vm.show()
         setTimeout(() => {
           const wheel = vm.$el.querySelector('.cube-picker-wheel-wrapper > div > ul')
           const transform = wheel.style.webkitTransform || wheel.style.transform
           expect(transform.match(/translate\(0px,\s*(-?\d+)px\)/)[1])
             .to.equal('-36')
+
+          expect(firstWheelItems[1].textContent.trim())
+            .to.equal(`${nextDate.getMonth() + 1}月${nextDate.getDate()}日`)
+
           done()
         }, 100)
       })
@@ -67,11 +75,11 @@ describe('TimePicker', () => {
       }
     })
 
-    const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+    const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
     expect(cancelBtn.textContent.trim())
       .to.equal('取消')
 
-    const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+    const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
     expect(confirmBtn.textContent.trim())
       .to.equal('确定')
     vm.show()
@@ -104,14 +112,14 @@ describe('TimePicker', () => {
     return new Promise((resolve) => {
       vm.show()
       setTimeout(() => {
-        const cancelBtn = vm.$el.querySelector('.cube-picker-choose [data-action="cancel"]')
+        const cancelBtn = vm.$el.querySelector('.cube-picker-cancel')
         cancelBtn.click()
         expect(cancelHandle)
           .to.be.callCount(1)
 
         vm.show()
         setTimeout(() => {
-          const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
+          const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
           confirmBtn.click()
           const now = +new Date()
           expect(selectHandle)