Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
bc204b3c
C
cube-ui
项目概览
DiDi
/
cube-ui
大约 1 年 前同步成功
通知
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,发现更多精彩内容 >>
提交
bc204b3c
编写于
4月 26, 2018
作者:
A
Amy
提交者:
HuangYi
4月 26, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[feat] cascade-picker: async (#175)
* [feat] cascade-picker: aync * [test]
上级
9030191c
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
143 addition
and
19 deletion
+143
-19
example/pages/cascade-picker.vue
example/pages/cascade-picker.vue
+38
-1
src/components/cascade-picker/cascade-picker.vue
src/components/cascade-picker/cascade-picker.vue
+29
-17
src/components/picker/picker.vue
src/components/picker/picker.vue
+7
-1
test/unit/specs/cascade-picker.spec.js
test/unit/specs/cascade-picker.spec.js
+69
-0
未找到文件。
example/pages/cascade-picker.vue
浏览文件 @
bc204b3c
...
...
@@ -5,6 +5,7 @@
<cube-button
@
click=
"showCascadePicker"
>
Cascade Picker
</cube-button>
<cube-button
@
click=
"showCityPicker"
>
City Picker
</cube-button>
<cube-button
@
click=
"showSetDataPicker"
>
Set Data
</cube-button>
<cube-button
@
click=
"showAsyncPicker"
>
Async Cascade
</cube-button>
</cube-button-group>
</div>
</cube-page>
...
...
@@ -16,7 +17,7 @@
import
{
provinceList
,
cityList
,
areaList
}
from
'
example/data/area
'
import
{
cascadeData
}
from
'
example/data/cascade
'
const
cityData
=
provinceList
const
cityData
=
provinceList
.
slice
()
cityData
.
forEach
(
province
=>
{
province
.
children
=
cityList
[
province
.
value
]
province
.
children
.
forEach
(
city
=>
{
...
...
@@ -24,6 +25,11 @@
})
})
const
asyncData
=
provinceList
.
slice
()
const
asyncSelectedIndex
=
[
0
,
0
,
0
]
asyncData
[
0
].
children
=
cityList
[
asyncData
[
0
].
value
]
asyncData
[
0
].
children
[
0
].
children
=
areaList
[
asyncData
[
0
].
children
[
0
].
value
]
export
default
{
mounted
()
{
this
.
cascadePicker
=
this
.
$createCascadePicker
({
...
...
@@ -51,6 +57,34 @@
onSelect
:
this
.
selectHandle
,
onCancel
:
this
.
cancelHandle
})
this
.
asyncPicker
=
this
.
$createCascadePicker
({
title
:
'
Async Cascade
'
,
async
:
true
,
data
:
asyncData
,
selectedIndex
:
asyncSelectedIndex
.
slice
(),
onSelect
:
this
.
selectHandle
,
onCancel
:
this
.
cancelHandle
,
onChange
:
(
i
,
newIndex
)
=>
{
if
(
newIndex
!==
asyncSelectedIndex
[
i
])
{
asyncSelectedIndex
.
splice
(
i
,
1
,
newIndex
)
if
(
i
<
2
)
{
setTimeout
(()
=>
{
if
(
i
===
0
)
{
const
current
=
asyncData
[
newIndex
]
current
.
children
=
current
.
children
||
cityList
[
current
.
value
]
}
if
(
i
===
1
)
{
const
current
=
asyncData
[
asyncSelectedIndex
[
0
]].
children
[
newIndex
]
current
.
children
=
current
.
children
||
areaList
[
current
.
value
]
}
this
.
asyncPicker
.
setData
(
asyncData
,
asyncSelectedIndex
)
},
500
)
}
}
}
})
},
methods
:
{
showCascadePicker
()
{
...
...
@@ -69,6 +103,9 @@
this
.
setDataPicker
.
setData
(
cityData
,
[
1
,
1
,
0
])
},
1000
)
},
showAsyncPicker
()
{
this
.
asyncPicker
.
show
()
},
selectHandle
(
selectedVal
,
selectedIndex
,
selectedText
)
{
this
.
$createDialog
({
type
:
'
warn
'
,
...
...
src/components/cascade-picker/cascade-picker.vue
浏览文件 @
bc204b3c
<
template
>
<cube-picker
ref=
"picker"
v-model=
"isVisible"
:data=
"pickerData"
:selected-index=
"pickerSelectedIndex"
:title=
"title"
:subtitle=
"subtitle"
:z-index=
"zIndex"
:cancel-txt=
"cancelTxt"
:confirm-txt=
"confirmTxt"
:swipe-time=
"swipeTime"
@
select=
"_pickerSelect"
@
cancel=
"_pickerCancel"
@
change=
"_pickerChange"
></cube-picker>
ref=
"picker"
v-model=
"isVisible"
:data=
"pickerData"
:selected-index=
"pickerSelectedIndex"
:pending=
"pending"
:title=
"title"
:subtitle=
"subtitle"
:z-index=
"zIndex"
:cancel-txt=
"cancelTxt"
:confirm-txt=
"confirmTxt"
:swipe-time=
"swipeTime"
@
select=
"_pickerSelect"
@
cancel=
"_pickerCancel"
@
change=
"_pickerChange"
>
</cube-picker>
</
template
>
<
script
type=
"text/ecmascript-6"
>
...
...
@@ -30,11 +32,18 @@
export
default
{
name
:
COMPONENT_NAME
,
mixins
:
[
visibilityMixin
,
popupMixin
,
basicPickerMixin
,
pickerMixin
],
props
:
{
async
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
cascadeData
:
this
.
data
.
slice
(),
pickerSelectedIndex
:
this
.
selectedIndex
.
slice
(),
pickerData
:
[]
pickerData
:
[],
pending
:
false
}
},
created
()
{
...
...
@@ -42,8 +51,9 @@
},
methods
:
{
setData
(
data
,
selectedIndex
=
[])
{
this
.
cascadeData
=
data
this
.
pickerSelectedIndex
=
selectedIndex
this
.
pending
=
false
this
.
cascadeData
=
data
.
slice
()
this
.
pickerSelectedIndex
=
selectedIndex
.
slice
()
this
.
_updatePickerData
()
},
_pickerSelect
(
selectedVal
,
selectedIndex
,
selectedText
)
{
...
...
@@ -55,7 +65,9 @@
_pickerChange
(
i
,
newIndex
)
{
if
(
newIndex
!==
this
.
pickerSelectedIndex
[
i
])
{
this
.
pickerSelectedIndex
.
splice
(
i
,
1
,
newIndex
)
this
.
_updatePickerData
(
i
+
1
)
this
.
async
?
(
this
.
pending
=
i
!==
this
.
pickerData
.
length
-
1
)
:
this
.
_updatePickerData
(
i
+
1
)
}
this
.
$emit
(
EVENT_CHANGE
,
i
,
newIndex
)
},
...
...
src/components/picker/picker.vue
浏览文件 @
bc204b3c
...
...
@@ -58,6 +58,12 @@
export
default
{
name
:
COMPONENT_NAME
,
mixins
:
[
visibilityMixin
,
popupMixin
,
basicPickerMixin
,
pickerMixin
],
props
:
{
pending
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
pickerData
:
this
.
data
.
slice
(),
...
...
@@ -249,7 +255,7 @@
}
},
_canConfirm
()
{
return
this
.
wheels
.
every
((
wheel
)
=>
{
return
!
this
.
pending
&&
this
.
wheels
.
every
((
wheel
)
=>
{
return
!
wheel
.
isInTransition
})
}
...
...
test/unit/specs/cascade-picker.spec.js
浏览文件 @
bc204b3c
...
...
@@ -158,6 +158,74 @@ describe('CascadePicker', () => {
},
100
)
})
it
(
'
should support async cascade
'
,
function
(
done
)
{
this
.
timeout
(
10000
)
const
data
=
[
{
value
:
1
,
text
:
'
1
'
,
children
:
[{
value
:
11
,
text
:
'
11
'
}]
},
{
value
:
2
,
text
:
'
2
'
}
]
const
selectedIndex
=
[
0
,
0
]
const
selectHandle
=
sinon
.
spy
()
vm
=
createCascadePicker
({
async
:
true
,
data
:
data
,
selectedIndex
:
selectedIndex
.
slice
()
},
{
select
:
selectHandle
,
change
:
(
i
,
newIndex
)
=>
{
if
(
newIndex
!==
selectedIndex
[
i
])
{
selectedIndex
.
splice
(
i
,
1
,
newIndex
)
if
(
i
<
1
)
{
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
0
)
vm
.
$nextTick
(()
=>
{
const
confirmBtn
=
vm
.
$el
.
querySelector
(
'
.cube-picker-confirm
'
)
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
0
)
setTimeout
(()
=>
{
data
[
1
].
children
=
[{
value
:
21
,
text
:
'
21
'
}]
vm
.
setData
(
data
,
selectedIndex
)
vm
.
$nextTick
(()
=>
{
confirmBtn
.
click
()
expect
(
selectHandle
)
.
to
.
be
.
callCount
(
1
)
done
()
})
},
500
)
})
}
}
}
})
vm
.
show
()
setTimeout
(()
=>
{
const
wheels
=
vm
.
$el
.
querySelectorAll
(
'
.cube-picker-wheel-wrapper > div
'
)
const
firstWheelItems
=
wheels
[
0
].
querySelectorAll
(
'
li
'
)
dispatchSwipe
(
firstWheelItems
[
1
],
[
{
pageX
:
firstWheelItems
[
1
].
offsetLeft
+
10
,
pageY
:
firstWheelItems
[
1
].
offsetTop
+
10
},
{
pageX
:
firstWheelItems
[
1
].
offsetLeft
+
10
,
pageY
:
60
}
],
100
)
},
150
)
})
it
(
'
$updateProps
'
,
function
(
done
)
{
this
.
timeout
(
10000
)
...
...
@@ -190,6 +258,7 @@ describe('CascadePicker', () => {
console
.
warn
=
function
(...
args
)
{
msgs
.
push
(
args
.
join
(
'
#
'
))
}
vm
=
app
.
$createCascadePicker
({},
true
)
expect
(
msgs
.
length
)
.
to
.
equal
(
1
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录