Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
5c5d64f2
C
cube-ui
项目概览
DiDi
/
cube-ui
12 个月 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5c5d64f2
编写于
4月 26, 2018
作者:
A
Amy
提交者:
doly mood
4月 26, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[feat] Picker-based: subtitle (#174)
* [feat]picker-based: subtitle
上级
b5583853
变更
25
隐藏空白更改
内联
并排
Showing
25 changed file
with
231 addition
and
141 deletion
+231
-141
document/components/docs/en-US/cascade-picker.md
document/components/docs/en-US/cascade-picker.md
+2
-1
document/components/docs/en-US/date-picker.md
document/components/docs/en-US/date-picker.md
+1
-0
document/components/docs/en-US/picker.md
document/components/docs/en-US/picker.md
+44
-1
document/components/docs/en-US/segment-picker.md
document/components/docs/en-US/segment-picker.md
+1
-0
document/components/docs/en-US/time-picker.md
document/components/docs/en-US/time-picker.md
+1
-0
document/components/docs/zh-CN/cascade-picker.md
document/components/docs/zh-CN/cascade-picker.md
+2
-1
document/components/docs/zh-CN/date-picker.md
document/components/docs/zh-CN/date-picker.md
+1
-0
document/components/docs/zh-CN/picker.md
document/components/docs/zh-CN/picker.md
+44
-1
document/components/docs/zh-CN/segment-picker.md
document/components/docs/zh-CN/segment-picker.md
+1
-0
document/components/docs/zh-CN/time-picker.md
document/components/docs/zh-CN/time-picker.md
+1
-0
example/components/normal-time-picker.vue
example/components/normal-time-picker.vue
+0
-59
example/pages/picker.vue
example/pages/picker.vue
+7
-10
src/common/mixins/picker.js
src/common/mixins/picker.js
+3
-0
src/common/stylus/theme/default.styl
src/common/stylus/theme/default.styl
+1
-0
src/components/cascade-picker/cascade-picker.vue
src/components/cascade-picker/cascade-picker.vue
+1
-0
src/components/date-picker/date-picker.vue
src/components/date-picker/date-picker.vue
+1
-0
src/components/picker/picker.vue
src/components/picker/picker.vue
+61
-38
src/components/segment-picker/segment-picker.vue
src/components/segment-picker/segment-picker.vue
+1
-0
src/components/time-picker/time-picker.vue
src/components/time-picker/time-picker.vue
+2
-1
test/unit/specs/cascade-picker.spec.js
test/unit/specs/cascade-picker.spec.js
+12
-2
test/unit/specs/date-picker.spec.js
test/unit/specs/date-picker.spec.js
+4
-4
test/unit/specs/picker.spec.js
test/unit/specs/picker.spec.js
+14
-5
test/unit/specs/segment-picker.spec.js
test/unit/specs/segment-picker.spec.js
+5
-5
test/unit/specs/select.spec.js
test/unit/specs/select.spec.js
+3
-3
test/unit/specs/time-picker.spec.js
test/unit/specs/time-picker.spec.js
+18
-10
未找到文件。
document/components/docs/en-US/cascade-picker.md
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
已删除
100644 → 0
浏览文件 @
b5583853
<
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
浏览文件 @
5c5d64f2
...
...
@@ -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=
"show
NormalTimePicker"
>
Normal Time Picker
</cube-button>
<cube-button
@
click=
"show
SubtitlePicker"
>
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
)
},
show
NormalTim
ePicker
()
{
this
.
normalTim
ePicker
.
show
()
show
Subtitl
ePicker
()
{
this
.
subtitl
ePicker
.
show
()
},
selectHandle
(
selectedVal
,
selectedIndex
,
selectedText
)
{
this
.
$createDialog
({
...
...
src/common/mixins/picker.js
浏览文件 @
5c5d64f2
...
...
@@ -3,6 +3,9 @@ export default {
title
:
{
type
:
String
},
subtitle
:
{
type
:
String
},
cancelTxt
:
{
type
:
String
,
default
:
'
取消
'
...
...
src/common/stylus/theme/default.styl
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
<
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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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
浏览文件 @
5c5d64f2
...
...
@@ -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-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
1
)
// cancel
vm
.
show
()
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
cancelBtn
.
click
()
expect
(
cancelHandle
)
.
to
.
be
.
callCount
(
1
)
...
...
test/unit/specs/date-picker.spec.js
浏览文件 @
5c5d64f2
...
...
@@ -77,7 +77,7 @@ describe('DatePicker', () => {
// test: _arrayToDate if (i < this.beginIndex)
vm
.
show
()
setTimeout
(()
=>
{
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
done
()
},
50
)
...
...
@@ -156,14 +156,14 @@ describe('DatePicker', () => {
.
to
.
be
.
callCount
(
1
)
// select
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
1
)
// cancel
vm
.
show
()
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
cancelBtn
.
click
()
expect
(
cancelHandle
)
.
to
.
be
.
callCount
(
1
)
...
...
@@ -205,7 +205,7 @@ describe('DatePicker', () => {
vm
.
show
()
setTimeout
(()
=>
{
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
calledWith
(
new
Date
(
2010
,
9
,
1
),
[
2010
,
10
,
1
],
[
'
2010
'
,
'
10
'
,
'
1
'
])
...
...
test/unit/specs/picker.spec.js
浏览文件 @
5c5d64f2
...
...
@@ -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-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
expect
(
confirmBtn
.
textContent
.
trim
())
.
to
.
equal
(
'
好的
'
)
...
...
@@ -166,14 +175,14 @@ describe('Picker', () => {
setTimeout
(()
=>
{
vm
.
show
()
setTimeout
(()
=>
{
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
cancelBtn
.
click
()
expect
(
cancelHandle
)
.
to
.
be
.
callCount
(
1
)
vm
.
show
()
setTimeout
(()
=>
{
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
1
)
...
...
test/unit/specs/segment-picker.spec.js
浏览文件 @
5c5d64f2
...
...
@@ -61,8 +61,8 @@ describe('SegmentPicker', () => {
expect
(
wheels
.
length
)
.
to
.
equal
(
7
)
const
cancelBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
)
const
confirmBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
cancelBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
ancel
'
)
const
confirmBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
onfirm
'
)
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-c
hoose [data-action="cancel"]
'
)
const
confirmBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
cancelBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
ancel
'
)
const
confirmBtns
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-c
onfirm
'
)
// 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
浏览文件 @
5c5d64f2
...
...
@@ -46,9 +46,9 @@ describe('Select.vue', () => {
vm
.
$parent
.
confirmTxt
=
'
confirm2
'
vm
.
$parent
.
cancelTxt
=
'
cancel2
'
vm
.
$nextTick
(()
=>
{
expect
(
vm
.
picker
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
).
textContent
.
trim
())
expect
(
vm
.
picker
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
).
textContent
.
trim
())
.
to
.
equal
(
'
cancel2
'
)
expect
(
vm
.
picker
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
).
textContent
.
trim
())
expect
(
vm
.
picker
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
).
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-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
document
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
expect
(
changeHandle
)
.
to
.
be
.
callCount
(
1
)
...
...
test/unit/specs/time-picker.spec.js
浏览文件 @
5c5d64f2
...
...
@@ -20,11 +20,11 @@ describe('TimePicker', () => {
it
(
'
should render correct contents
'
,
function
(
done
)
{
vm
=
createPicker
()
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
expect
(
cancelBtn
.
textContent
.
trim
())
.
to
.
equal
(
'
取消
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
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-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
expect
(
cancelBtn
.
textContent
.
trim
())
.
to
.
equal
(
'
取消
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
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-c
hoose [data-action="cancel"]
'
)
const
cancelBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
ancel
'
)
cancelBtn
.
click
()
expect
(
cancelHandle
)
.
to
.
be
.
callCount
(
1
)
vm
.
show
()
setTimeout
(()
=>
{
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
hoose [data-action="confirm"]
'
)
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-c
onfirm
'
)
confirmBtn
.
click
()
const
now
=
+
new
Date
()
expect
(
selectHandle
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录