Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
0dd0df1b
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,发现更多精彩内容 >>
提交
0dd0df1b
编写于
12月 15, 2017
作者:
A
AmyFoxFN
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add cascade-picker document
上级
7cc98c2e
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
213 addition
and
9 deletion
+213
-9
document/common/config/menu.json
document/common/config/menu.json
+2
-0
document/components/docs/en-US/cascade-picker.md
document/components/docs/en-US/cascade-picker.md
+3
-0
document/components/docs/zh-CN/cascade-picker.md
document/components/docs/zh-CN/cascade-picker.md
+207
-0
example/data/cascade.js
example/data/cascade.js
+0
-8
example/pages/cascade-picker.vue
example/pages/cascade-picker.vue
+1
-1
未找到文件。
document/common/config/menu.json
浏览文件 @
0dd0df1b
...
...
@@ -29,6 +29,7 @@
"popup"
:
"Popup"
,
"toast"
:
"Toast"
,
"picker"
:
"Picker"
,
"cascade-picker"
:
"CascadePicker"
,
"time-picker"
:
"TimePicker"
,
"dialog"
:
"Dialog"
,
"action-sheet"
:
"ActionSheet"
...
...
@@ -83,6 +84,7 @@
"popup"
:
"Popup"
,
"toast"
:
"Toast"
,
"picker"
:
"Picker"
,
"cascade-picker"
:
"CascadePicker"
,
"time-picker"
:
"TimePicker"
,
"dialog"
:
"Dialog"
,
"action-sheet"
:
"ActionSheet"
...
...
document/components/docs/en-US/cascade-picker.md
0 → 100644
浏览文件 @
0dd0df1b
## CascadePicker
Please waiting...
\ No newline at end of file
document/components/docs/zh-CN/cascade-picker.md
0 → 100644
浏览文件 @
0dd0df1b
## CascadePicker组件
`CascadePicker`
组件是级联选择器,用于实现多列选择之间的级联变化。比如,在选择省市区时,当省切换到了江苏省,城市列应该变成江苏省的各个城市,同理,如果城市切换到苏州市,区列的选项也应变成苏州市的各个区,这就级联的意义。
### 示例
-
基本用法
相比普通选择器,级联选择器需要传入的数据结构是不一样的。普通选择器的数据结构是一个二维数组,每一列对应一个固定的数组,而级联选择器,则需要传入的是一个树形结构,第一列的数组,的每个选项的children属性,对应着切换到该选项时后续列的数据,从而实现对后续列的改变。如下所示
```
html
<cube-button
@
click=
"showCascadePicker"
>
Cascade Picker
</cube-button>
```
```
js
const
cascadeData
=
[
{
value
:
'
Fruit
'
,
text
:
'
Fruit
'
,
children
:
[
{
value
:
'
Apple
'
,
text
:
'
Apple
'
,
children
:
[{
value
:
1
,
text
:
'
One
'
},
{
value
:
2
,
text
:
'
Two
'
}]
},
{
value
:
'
Orange
'
,
text
:
'
Orange
'
,
children
:
[{
value
:
3
,
text
:
'
Three
'
},
{
value
:
4
,
text
:
'
Four
'
}]
}
]
},
{
value
:
'
Drink
'
,
text
:
'
Drink
'
,
children
:
[
{
value
:
'
Coffee
'
,
text
:
'
Coffee
'
,
children
:
[{
value
:
1
,
text
:
'
One
'
},
{
value
:
2
,
text
:
'
Two
'
}]
},
{
value
:
'
Tea
'
,
text
:
'
Tea
'
,
children
:
[{
value
:
1
,
text
:
'
One
'
},
{
value
:
3
,
text
:
'
Three
'
}]
}
]
}
]
export
default
{
mounted
()
{
this
.
cascadePicker
=
this
.
$createCascadePicker
({
title
:
'
Cascade Picker
'
,
data
:
cascadeData
,
selectedIndex
:
[
1
,
0
,
0
],
onSelect
:
(
selectedVal
,
selectedIndex
,
selectedText
)
=>
{
console
.
log
(
'
select
'
,
selectedVal
,
selectedIndex
,
selectedText
)
},
onCancel
:
()
=>
{
console
.
log
(
'
cancel
'
)
}
})
},
methods
:
{
showCascadePicker
()
{
this
.
cascadePicker
.
show
()
}
}
}
```
当第一列选中
`Fruit`
时,第二列的选项是
`Apple`
、
`Orange`
。以此类推,当第二列选中
`Orange`
时,第三列的选项是
`Three`
、
`Four`
。
-
省市区选择器
对于省市区选择器,只需要构造出级联选择器的数据结构传入就可以了。
```
html
<cube-button
@
click=
"showCityPicker"
>
City Picker
</cube-button>
```
```
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
.
cityPicker
=
this
.
$createCascadePicker
({
title
:
'
City Picker
'
,
data
:
cityData
,
onSelect
:
(
selectedVal
,
selectedIndex
,
selectedText
)
=>
{
console
.
log
(
'
select
'
,
selectedVal
,
selectedIndex
,
selectedText
)
},
onCancel
:
()
=>
{
console
.
log
(
'
cancel
'
)
}
})
},
methods
:
{
showCityPicker
()
{
this
.
cityPicker
.
show
()
}
}
}
```
-
日期选择器
日期选择器的原理也是一样,就是构造出级联选择器的数据结构。而且我们还在示例中提供一个
[
日期选择器组件
](
https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue
)
,可以传入起始日期和结束日期,帮你生成相应的级联树形数据结构。用法如下:
```
html
<cube-button
@
click=
"showDatePicker"
>
Date Picker
</cube-button>
```
```
js
import
DatePicker
from
'
example/components/date-picker.vue
'
createAPI
(
Vue
,
DatePicker
,
[
'
select
'
,
'
cancel
'
],
false
)
export
default
{
mounted
()
{
this
.
datePicker
=
this
.
$createDatePicker
({
min
:
[
2008
,
8
,
8
],
max
:
[
2020
,
10
,
20
],
onSelect
:
(
selectedVal
,
selectedIndex
,
selectedText
)
=>
{
console
.
log
(
'
select
'
,
selectedVal
,
selectedIndex
,
selectedText
)
},
onCancel
:
()
=>
{
console
.
log
(
'
cancel
'
)
}
})
},
methods
:
{
showDatePicker
()
{
this
.
datePicker
.
show
()
}
}
}
```
-
实例方法
`setData`
`setData`
方法,用于重置
`CascadePicker`
实例的数据和选中的索引。
```
html
<cube-button
@
click=
"showPicker"
>
SetData Picker
</cube-button>
```
```
js
export
default
{
mounted
()
{
this
.
setDataPicker
=
this
.
$createCascadePicker
({
title
:
'
Set Data
'
,
onSelect
:
(
selectedVal
,
selectedIndex
,
selectedText
)
=>
{
console
.
log
(
'
select
'
,
selectedVal
,
selectedIndex
,
selectedText
)
},
onCancel
:
()
=>
{
console
.
log
(
'
cancel
'
)
}
})
},
methods
:
{
showSetDataPicker
()
{
// setData when picker is invisible
this
.
setDataPicker
.
setData
(
cascadeData
)
this
.
setDataPicker
.
show
()
setTimeout
(()
=>
{
// setData when picker is visible
this
.
setDataPicker
.
setData
(
cityData
,
[
1
,
1
,
0
])
},
1000
)
}
}
}
```
值得注意的一点是,虽然不管选择器显示前后,都可以
`setData`
,但是为了体验,在显示后
`setData`
,所传入的数据结构,必须与之前的列数相同,也就是说如果之前是三列选择器,显示时
`setData`
还得是三列。
### Props 配置
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
| title | 标题 | String | '' | - |
| data | 级联选择器的树形数据,用于初始化选项 | Array | [] | - |
| selectIndex | 被选中的索引值,拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
*
`data`
子配置项
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
| text | 每个选项展示的文案 | String/Number | - | - |
| value | 每个选项的值 | String/Number/Boolean | - | - |
### 事件
| 事件名 | 说明 | 参数1 | 参数2 | 参数3 |
| - | - | - | - | - |
| select | 点击确认按钮触发此事件 | selectedVal: 当前选中项每一列的值,Array类型 | selectedIndex: 当前选中项每一列的索引,Array类型 | selectedText: 当前选中项每一列的文案,Array类型 |
| change | 滚轴滚动后触发此事件 | index: 当前滚动列次序,Number类型 | selectedIndex: 当前列选中项的索引,Number类型 |
| cancel | 点击取消按钮触发此事件 | - | - |
### 实例方法
| 方法名 | 说明 | 参数1 | 参数2 |
| - | - | - | - |
| setData | 重置数据和选中的索引 | 级联树形数据结构,Array类型 | 每列选中的索引,Array类型 |
example/data/cascade.js
浏览文件 @
0dd0df1b
...
...
@@ -25,14 +25,6 @@ export const cascadeData = [
value
:
'
Orange
'
,
text
:
'
Orange
'
,
children
:
[
{
value
:
1
,
text
:
'
One
'
},
{
value
:
2
,
text
:
'
Two
'
},
{
value
:
3
,
text
:
'
Three
'
...
...
example/pages/cascade-picker.vue
浏览文件 @
0dd0df1b
...
...
@@ -35,7 +35,7 @@
this
.
cascadePicker
=
this
.
$createCascadePicker
({
title
:
'
Cascade Picker
'
,
data
:
cascadeData
,
selectedIndex
:
[
1
,
0
,
0
],
selectedIndex
:
[
0
,
1
,
0
],
onSelect
:
this
.
selectHandle
,
onCancel
:
this
.
cancelHandle
,
onChange
:
()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录