点我扫二维码，查看demo
# Picker 选择器
# 介绍
提供多个选项供用户选择，支持单列和多列选择
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { Picker } from '@dolphin-iot/ui'
Vue.use(Picker);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
columns数据项提供default-index参数，表示当前列表默认选择的索引项
<template>
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-picker :columns="cities" title="请选择城市" @confirm="onConfirm" @change="onChange" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
city: '',
cities: [
{
defaultIndex: 2,
items: [
{ text: '北京' },
{ text: '上海' },
{ text: '广州' },
{ text: '深圳' },
{ text: '佛山' },
{ text: '杭州' },
{ text: '南京' },
{ text: '武汉' },
{ text: '青岛' }
]
}
],
}
},
methods:{
onChange() {
},
onConfirm() {
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: hidden;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 只读状态
通过readonly设置选项是否只可读状态
<template>
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-picker :columns="cities" title="请选择城市" readonly />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cities: [
{
defaultIndex: 2,
items: [
{ text: '北京' },
{ text: '上海' },
{ text: '广州' },
{ text: '深圳' },
{ text: '佛山' },
{ text: '杭州' },
{ text: '南京' },
{ text: '武汉' },
{ text: '青岛' }
]
}
],
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: hidden;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# 多列选择
多列选择要求每一列的数据包裹在一个对象中，对象中的default-index表示当前列默认选择项，suffix表示列后缀，items为当列数据列表
<template>
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-picker
:columns="sizes"
title="请选择属性"
@cancel="onCancel1"
@confirm="onConfirm1"
@change="onChange1"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sizes: [
{
defaultIndex: 2,
items: [{ text: '黄色' }, { text: '白色' }, { text: '粉色' }, { text: '红色' }, { text: '蓝色' }],
suffix: '颜色'
},
{
defaultIndex: 2,
items: [{ text: 'XS' }, { text: 'S' }, { text: 'M' }, { text: 'L' }, { text: 'XL' }],
suffix: '尺寸'
}
],
};
},
methods: {
onChange1(values, columnIndex) {
console.log(values );
console.log( columnIndex)
},
onConfirm1(values) {
console.log('确定')
},
onCancel1() {
console.log('取消')
},
}
};
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: hidden;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# 日期选择器
Picker组件结合DateTimePicker组件实现日期选择器；DateTimePikcer组件的pattern属性指定类型；
<template>
<div class="demo-list">
<div class="panel">
<div class="demo-panel">
<mx-date-time-picker
pattern="date"
v-model="date"
:show-suffix="true"
title="请选择日期"
@cancel="onCancel2"
@confirm="onConfirm2"
@change="onChange2"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
basic: true,
data: [
{
items: this.getYears(),
defaultIndex: 5,
suffix: '年'
},
{
items: this.getMonths(),
suffix: '月'
}
],
date: new Date(2019, 8, 23)
};
},
methods: {
getYears(count = 10) {
const res = [];
let base = 2000;
for (let i = 0; i < count; i++) {
res.push({ text: base + i + 1 });
}
return res;
},
getMonths(count = 31) {
const res = [];
for (let i = 0; i < count; i++) {
res.push({ text: i.tostring().padStart(2, '0') });
}
return res;
},
onChange2(values, columnIndex) {
console.log(values );
console.log( columnIndex)
},
onConfirm2(values) {
console.log('确定');
console.log(this.date)
},
onCancel2() {
console.log('取消')
}
}
};
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: hidden;
.panel{
padding-left: 10px;
padding-right:10px;
margin-bottom: 20px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# API
# Prop
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 对象数组，提供每一列显示的数据 | Array | - |
| item-height | 每个选项的高度 | number | 50 |
| visible-item-count | 可见选项的个数 | number | 5 |
| swipe-duration | 快速滑动时惯性滚动的时长，单位为： ms | number | 800 |
| title | 顶部栏标题 | string | - |
| readonly | 是否为只读状态，在只读状态下，无法切换选项 | boolean | false |
| window-pattern | 选中选项时的背景样式 | string | fill |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 切换选项时触发 | value object |
| cancel | 点击取消时触发 | - |
| confirm | 点击确定时触发 | - |
# Slots
| 名称 | 说明 |
|---|---|
| header | 自定义顶部内容 |
| footer | 自定义底部内容 |