Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
ccf33de3
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,发现更多精彩内容 >>
提交
ccf33de3
编写于
3月 30, 2018
作者:
A
AmyFoxFN
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
[add] segment-picker: doc
上级
5fa18548
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
240 addition
and
20 deletion
+240
-20
document/common/config/menu.json
document/common/config/menu.json
+1
-0
document/components/docs/zh-CN/segment-picker.md
document/components/docs/zh-CN/segment-picker.md
+210
-0
example/pages/segment-picker.vue
example/pages/segment-picker.vue
+29
-20
未找到文件。
document/common/config/menu.json
浏览文件 @
ccf33de3
...
...
@@ -39,6 +39,7 @@
"picker"
:
"Picker"
,
"cascade-picker"
:
"CascadePicker"
,
"time-picker"
:
"TimePicker"
,
"segment-picker"
:
"SegmentPicker"
,
"dialog"
:
"Dialog"
,
"action-sheet"
:
"ActionSheet"
}
...
...
document/components/docs/zh-CN/segment-picker.md
0 → 100644
浏览文件 @
ccf33de3
## SegmentPicker 组件
段选择器,用于实现多段的选择,比如选择时间段:2018年3月15日-1018年3月31日。
### 示例
-
基本用法
```
html
<cube-button
@
click=
"showPicker"
>
Picker
</cube-button>
```
```
js
const
col1Data
=
[{
text
:
'
剧毒
'
,
value
:
'
剧毒
'
},
{
text
:
'
蚂蚁
'
,
value
:
'
蚂蚁
'
},
{
text
:
'
幽鬼
'
,
value
:
'
幽鬼
'
}]
export
default
{
mounted
()
{
this
.
picker
=
this
.
$createPicker
({
title
:
'
Picker
'
,
data
:
[
col1Data
],
onSelect
:
(
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
()
},
onCancel
:
()
=>
{
this
.
$createToast
({
type
:
'
correct
'
,
txt
:
'
Picker canceled
'
,
time
:
1000
}).
show
()
}
})
},
methods
:
{
showPicker
()
{
this
.
picker
.
show
()
}
}
}
```
-
多列选择器
`data`
字段接收一个数组,其长度决定了
`picker`
的列数。
```
html
<cube-button
@
click=
"showMutiPicker"
>
Multi-column Picker
</cube-button>
```
```
js
const
col1Data
=
[{
text
:
'
剧毒
'
,
value
:
'
剧毒
'
},
{
text
:
'
蚂蚁
'
,
value
:
'
蚂蚁
'
},
{
text
:
'
幽鬼
'
,
value
:
'
幽鬼
'
}]
const
col2Data
=
[{
text
:
'
输出
'
,
value
:
'
输出
'
},
{
text
:
'
控制
'
,
value
:
'
控制
'
},
{
text
:
'
核心
'
,
value
:
'
核心
'
},
{
text
:
'
爆发
'
,
value
:
'
爆发
'
},
{
text
:
'
辅助
'
,
value
:
'
辅助
'
},
{
text
:
'
打野
'
,
value
:
'
打野
'
},
{
text
:
'
逃生
'
,
value
:
'
逃生
'
},
{
text
:
'
先手
'
,
value
:
'
先手
'
}]
const
col3Data
=
[{
text
:
'
梅肯
'
,
value
:
'
梅肯
'
},
{
text
:
'
秘法鞋
'
,
value
:
'
秘法鞋
'
},
{
text
:
'
假腿
'
,
value
:
'
假腿
'
},
{
text
:
'
飞鞋
'
,
value
:
'
飞鞋
'
},
{
text
:
'
辉耀
'
,
value
:
'
辉耀
'
},
{
text
:
'
金箍棒
'
,
value
:
'
金箍棒
'
}]
export
default
{
mounted
()
{
this
.
picker
=
this
.
$createPicker
({
title
:
'
Multi-column Picker
'
,
data
:
[
col1Data
,
col2Data
,
col3Data
],
onSelect
:
(
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
()
},
onCancel
:
()
=>
{
this
.
$createToast
({
type
:
'
correct
'
,
txt
:
'
Picker canceled
'
,
time
:
1000
}).
show
()
}
})
},
methods
:
{
showMutiPicker
()
{
this
.
mutiPicker
.
show
()
}
}
}
```
-
配置别名
可通过
`alias`
属性配置
`value`
和
`text`
的别名。如,用
`id`
代表
`value`
,用
`name`
代表
`text`
。
```
html
<cube-button
@
click=
"showAliasPicker"
>
Use Alias
</cube-button>
```
```
js
export
default
{
mounted
()
{
this
.
aliasPicker
=
this
.
$createPicker
({
title
:
'
Use Alias
'
,
data
:
[[{
id
:
1
,
name
:
'
A
'
},
{
id
:
2
,
name
:
'
B
'
},
{
id
:
3
,
name
:
'
C
'
}]],
alias
:
{
value
:
'
id
'
,
text
:
'
name
'
},
onSelect
:
(
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
()
},
onCancel
:
()
=>
{
this
.
$createToast
({
type
:
'
correct
'
,
txt
:
'
Picker canceled
'
,
time
:
1000
}).
show
()
}
})
},
methods
:
{
showAliasPicker
()
{
this
.
aliasPicker
.
show
()
}
}
}
```
-
实例方法
`setData`
```
html
<cube-button
@
click=
"showSetDataPicker"
>
Use SetData
</cube-button>
```
```
js
const
col1Data
=
[{
text
:
'
剧毒
'
,
value
:
'
剧毒
'
},
{
text
:
'
蚂蚁
'
,
value
:
'
蚂蚁
'
},
{
text
:
'
幽鬼
'
,
value
:
'
幽鬼
'
}]
const
col2Data
=
[{
text
:
'
梅肯
'
,
value
:
'
梅肯
'
},
{
text
:
'
秘法鞋
'
,
value
:
'
秘法鞋
'
},
{
text
:
'
假腿
'
,
value
:
'
假腿
'
},
{
text
:
'
飞鞋
'
,
value
:
'
飞鞋
'
},
{
text
:
'
辉耀
'
,
value
:
'
辉耀
'
},
{
text
:
'
金箍棒
'
,
value
:
'
金箍棒
'
}]
const
col3Data
=
[{
text
:
'
输出
'
,
value
:
'
输出
'
},
{
text
:
'
控制
'
,
value
:
'
控制
'
},
{
text
:
'
核心
'
,
value
:
'
核心
'
},
{
text
:
'
爆发
'
,
value
:
'
爆发
'
},
{
text
:
'
辅助
'
,
value
:
'
辅助
'
}]
export
default
{
mounted
()
{
this
.
picker
=
this
.
$createPicker
({
title
:
'
Use SetData
'
,
onSelect
:
(
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
()
},
onCancel
:
()
=>
{
this
.
$createToast
({
type
:
'
correct
'
,
txt
:
'
Picker canceled
'
,
time
:
1000
}).
show
()
}
})
},
methods
:
{
showSetDataPicker
()
{
this
.
picker
.
setData
([
col1Data
,
col2Data
,
col3Data
],
[
1
,
2
,
3
])
this
.
picker
.
show
()
}
}
}
```
实例方法
`setData`
可接受2个参数,都为数组类型。第一个参数为滚轴需要显示的数据,第二个参数为选中值的索引。
### Props 配置
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
| title | 标题 | String | '' | - |
| data | 传入 picker 数据,数组的长度决定了 picker 的列数 | Array | [] | - |
| selectedIndex | 被选中的索引值,拉起 picker 后显示这个索引值对应的内容 | Array | [] | [1] |
| cancelTxt | 取消按钮文案 | String | '取消' | - |
| confirmTxt | 确定按钮文案 | String | '确定' | - |
| swipeTime | 快速滑动 picker 滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 | - |
| alias | 配置
`value`
和
`text`
的别名 | Object | {} | { value: 'id', text: 'name'} |
*
`data`
子配置项
| 参数 | 说明 | 类型 | 默认值 | 示例 |
| - | - | - | - | - |
| text | picker每一列展示的文案 | String/Number | - | - |
| value | picker每一列展示的每项文案对应的值 | String/Number/Boolean | - | - |
### 事件
| 事件名 | 说明 | 参数1 | 参数2 | 参数3 |
| - | - | - | - | - |
| select | 点击确认按钮触发此事件 | selectedVal: 当前选中项每一列的值,Array类型 | selectedIndex: 当前选中项每一列的索引,Array类型 | selectedText: 当前选中项每一列的文案,Array类型 |
| change | 滚轴滚动后触发此事件 | index: 当前滚动列次序,Number类型 | selectedIndex: 当前列选中项的索引,Number类型 |
| value-change | 所确认的值变化时触发此事件 | selectedVal: 当前确认项每一列的值,Array类型 | selectedIndex: 当前确认项每一列的索引,Array类型 | selectedText: 当前选中项每一列的文案,Array类型 |
| cancel | 点击取消按钮触发此事件 | - | - |
### 实例方法
| 方法名 | 说明 | 参数1 | 参数2 |
| - | - | - | - |
| setData | 设置picker可选项 | picker每列可选项的文案和值,Array类型 | picker每列选中的索引,Array类型 |
example/pages/segment-picker.vue
浏览文件 @
ccf33de3
...
...
@@ -2,7 +2,8 @@
<cube-page
type=
"picker-view"
title=
"Segment Picker"
desc=
""
>
<div
slot=
"content"
>
<cube-button-group>
<cube-button
@
click=
"showSegmentPicker"
>
Segment Picker
</cube-button>
<cube-button
@
click=
"showDateSegmentPicker"
>
StartDate - EndDate
</cube-button>
<cube-button
@
click=
"showCitySegmentPicker"
>
Express - From - To
</cube-button>
<cube-button
@
click=
"updateProps"
>
Use $updateProps
</cube-button>
</cube-button-group>
</div>
...
...
@@ -25,7 +26,7 @@
export
default
{
mounted
()
{
this
.
s
egmentPicker
=
this
.
$createSegmentPicker
({
this
.
cityS
egmentPicker
=
this
.
$createSegmentPicker
({
data
:
[{
title
:
'
快递
'
,
data
:
[
expressData
],
...
...
@@ -46,29 +47,22 @@
confirmTxt
:
'
Confirm
'
,
nextTxt
:
'
Next
'
,
prevTxt
:
'
Prev
'
,
onSelect
:
(...
args
)
=>
{
console
.
log
(
'
select:
'
,
...
args
)
},
onCancel
:
(...
args
)
=>
{
console
.
log
(
'
cancel:
'
,
...
args
)
},
onNext
:
(...
args
)
=>
{
console
.
log
(
'
next:
'
,
...
args
)
},
onPrev
:
(...
args
)
=>
{
console
.
log
(
'
prev:
'
,
...
args
)
},
onChange
:
(...
args
)
=>
{
console
.
log
(
'
change
'
,
...
args
)
}
onSelect
:
this
.
selectHandle
,
onCancel
:
this
.
cancelHandle
,
onNext
:
this
.
nextHandle
,
onPrev
:
this
.
prevHandle
,
onChange
:
this
.
changeHandle
})
},
methods
:
{
showSegmentPicker
()
{
this
.
segmentPicker
.
show
()
showDateSegmentPicker
()
{
this
.
dateSegmentPicker
.
show
()
},
showCitySegmentPicker
()
{
this
.
citySegmentPicker
.
show
()
},
updateProps
()
{
this
.
s
egmentPicker
.
$updateProps
({
this
.
cityS
egmentPicker
.
$updateProps
({
data
:
[{
is
:
'
cube-cascade-picker
'
,
title
:
'
出发地
'
,
...
...
@@ -86,6 +80,21 @@
selectedIndex
:
[
0
,
0
,
0
]
}]
})
},
selectHandle
:
(...
args
)
=>
{
console
.
log
(
'
select:
'
,
...
args
)
},
cancelHandle
:
(...
args
)
=>
{
console
.
log
(
'
cancel:
'
,
...
args
)
},
nextHandle
:
(...
args
)
=>
{
console
.
log
(
'
next:
'
,
...
args
)
},
prevHandle
:
(...
args
)
=>
{
console
.
log
(
'
prev:
'
,
...
args
)
},
changeHandle
:
(...
args
)
=>
{
console
.
log
(
'
change
'
,
...
args
)
}
},
components
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录