tm-pickers 级联下拉选择器
提醒
包含了常用的：普通级联拉选择器(弹层式)，普通级联拉选择器(嵌入式)，地区选择器（弹层式），地区选择器（内嵌式））， 日期下拉选择器(弹层式)，日期下拉选择器(嵌入式)，等。理论上：普通级联器是无限列数的。
请留心，这里其实是：6 个组件的集合。
技巧
所有的弹层都自带了v-model双向绑定显示/隐藏变量。当然为了方便，可以直接使用插槽放入组件，点按自己显示。你可以看 到例子，并未使用v-model来显示弹层。
🎉目录导航
👉 普通级联下拉选择器
单列基本示列
<tm-pickers :default-value="selected" :list="['苹果','香蕉','可口可乐','新西兰','日本']">
<tm-button>普通单列显示</tm-button>
</tm-pickers>
1
2
3
2
3
<script>
export default {
data() {
return {
//请注意默认选中数据，也可以是 索引比如改成 [2],都是同样的选择可口可乐
selected:['可口可乐'],
}
},
methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
数据格式说明
上例中，体现的是['苹果','香蕉','可口可乐','新西兰','日本'],字符串数组选择。你当然也可改成对象的。但要提供range-key 来显示数据。上例可以改成如下：
提醒
如果你的数据格式改成了对象数组，同样的默认选中数据格式也要一致哦。
<tm-pickers :default-value="selected" :list="list" rang-key="title">
<tm-button>普通单列显示</tm-button>
</tm-pickers>
1
2
3
2
3
<script>
export default {
data() {
return {
//请注意默认选中数据要和list同步。当然你也一样可以以索引来默认选中
//改成selected:[2]效果是一样的，都是选中可口可乐
selected:[{title:'可口可乐'}],
list:[{title:'苹果'},{title:'香蕉'},{title:'可口可乐'},{title:'新西兰'},{title:'日本'}]
}
},
methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
多列基本示列
提醒
如果你要多列表级联选择数据，那么数据格式必须要使用对象数组，而不是字符串数组。并且需要提供rang-key="title" children-key="children"
第一个rang-key：表示显示文本的key,
第二个children-key：表示它的子级，同样需要和父级同样的数组格式。因此级联的列是无限的。
<tm-pickers :default-value="selected_1" :list="list_1" rang-key="title" children-key="children" btn-color="bg-gradient-amber-lighten">
<tm-button theme="bg-gradient-amber-lighten">显示多列</tm-button>
</tm-pickers>
1
2
3
2
3
<script>
export default {
data() {
return {
//同样你可以以对象来默认选中。
// [{title:'苹果sss'},{title:'苹果aaa'}]它就会选中第一列中的子级苹果sss和第一列中的子级苹果aaa
//但是要注意 title要保证是唯一的。如果你不能保证唯一。那么就需要使用索引了。
//因此我建议你使用多列下默认选中使用索引比较稳妥
selected_1:[1,1],
list_1:[
{
//title就是属性中的rang-key
title:"水果产品",
id:1,
//children就是属性中的children-key,子级可以套子级，这样就可以无限列啦。
children:[{title:'苹果sss'},{title:'香蕉'},{title:'可口可乐'},{title:'新西兰'},{title:'日本'}]
},
{
title:"房间类型",
id:2,
children:[{title:'苹果'},{title:'香蕉'},{title:'可口可乐'},{title:'新西兰'},{title:'日本'}]
},
{
title:"批发市场",
id:3,
children:[{title:'苹果aaa'},{title:'香蕉'},{title:'可口可乐'},{title:'新西兰'},{title:'日本'}]
},
]
}
},
methods: {}
}
</script>
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
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
👉 props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| title | String | 任意 | 选择 | 弹层标题 |
| btn-text | String | 任意 | 确认 | 底部按钮确认的文字 |
| btn-color | String | 任意主题色名称 | primary | 底部按钮确认的背景颜色仅支持主题色名称 |
| bg-color | String | 任意主题色名称 | white | 请填写背景的主题色名称 |
| default-value | Array<string>/Array<object> | - | [] | 可以使用.sync双向绑定默认赋值项。可选三种赋值方式，名称赋值，对象赋值，数字序列赋值 |
| item-height | Number | - | 88 | 项目的高度单位upx |
| list | Array<string>/Array<object> | - | [] | 选择器的数据 |
| rang-key | String | - | text | 如果List格式为对象数组，需要提供此值 |
| children-key | String | - | children | 如果List格式为对象数组且为多级联选择，需要提供此值，理论上无限级联数据 |
| black | Boolean | true/false | false | 是否开启暗黑模式。 |
| disabled | Boolean | true/false | false | 是否禁用。 |
👉Pros 事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @confirm | 选中的数据索引数组selected | Array<number> | 点击确认键时触发 |
| @change | 选中的数据索引(这里的选中并非真正意义上的选中，只是你滚动选中的项) | Array<number> | 滚动选项选中项目是触发 |
//selected
[1,5,6]
1
2
3
2
3
👉 嵌入式普通级联拉选择器 tm-pickersView
提醒
它与tm-pickers格式数据是一致的。因为tm-pickers就是在tm-pickersView基础上封装过来的。 其它的多列表同样方式。
第一个示例可以嵌入到页面中显示，如下：
<tm-pickersView :default-value="selected"
:list="['苹果','香蕉','可口可乐','新西兰','日本']">
</tm-pickersView>
1
2
3
4
2
3
4
👉 日期下拉选择器
基本的年月日示例
提醒
如果要设置默认选中的日期那么格式一定是：xx-xxx-xx xx:xx:xx格式。其它格式一律不处理，但不报错，会使用当前的时间作为默认处理。
<tm-pickersDate :default-value="d_1" @confirm="dateSe_1" btn-color="bg-gradient-orange-accent">
<tm-button theme="bg-gradient-orange-accent">年月日选择</tm-button>
</tm-pickersDate>
1
2
3
2
3
<script>
export default {
data() {
return {
d_1:"",
}
},
methods: {
dateSe_1(e){
// {year: 2021, month: 8, day: 23}
this.d_1 = e.year+'-'+e.month + '-' + e.day;
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
限时间段范围选择
提醒
因为我精确到了秒。因此你可以限制某个时间段精确到秒的范围选择。
如下示例：
将只会生成2020-10-1~2022-2-20内的时间段让用户选择。
<tm-pickersDate start="2020-10-1" end="2022-2-20" :default-value="d_1" @confirm="dateSe_1" btn-color="bg-gradient-orange-accent">
<tm-button theme="bg-gradient-orange-accent">年月日限制选择</tm-button>
</tm-pickersDate>
1
2
3
2
3
<script>
export default {
data() {
return {
d_1:"",
}
},
methods: {
dateSe_1(e){
// {year: 2021, month: 8, day: 23}
this.d_1 = e.year+'-'+e.month + '-' + e.day;
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如下示例：
将只会生成2021-2-1 15:00:00 ~ 2021-2-1 19:00:00 内的时间段让用户选择时分秒
<tm-pickersDate start="2021-2-1 15:00:00" end="2021-2-1 19:00:00" :default-value="d_2" @confirm="dateSe_2" :show-detail="{year:false,month:false,day:false,hour:true,min:true,sec:true}">
<tm-button theme="bg-gradient-blue-accent">时分秒选择</tm-button>
</tm-pickersDate>
1
2
3
2
3
<script>
export default {
data() {
return {
d_2:"",
}
},
methods: {
dateSe_1(e){
// {hour: 12, min: 44, sec: 0}
console.log(e);
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
👉 日期嵌入页面拉选择 tm-pickersDateView
提醒
它与tm-pickersDate格式数据是一致的。因为tm-pickersDate就是在tm-pickersDateView基础上封装过来的。
示例可以嵌入到页面中显示，如下：
<tm-pickersDateView></tm-pickersDateView>
1
2
2
👉 props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| title | String | 任意 | 选择 | 弹层标题 |
| btn-text | String | 任意 | 确认 | 底部按钮确认的文字 |
| btn-color | String | 任意主题色名称 | primary | 底部按钮确认的背景颜色仅支持主题色名称 |
| bg-color | String | 任意主题色名称 | white | 请填写背景的主题色名称 |
| default-value | 时间格式xx-xx-xx xx:xx:xx | - | 当前的时间 | 初始显示的时间 |
| item-height | Number | - | 88 | 项目的高度单位upx |
| black | Boolean | true/false | false | 是否开启暗黑模式。 |
| disabled | Boolean | true/false | false | 是否禁用。 |
| mode | Boolean | true/false | true | 是否显示中文后缀。年，月，日，时，分，秒 |
| full-number | Boolean | true/false | false | 是否把个位数补齐双位数 |
| show-detail | Object | - | {year:true,month:true,day:true,hour:false,min:false,sec:false} | 需要显示的时间列 |
| start | 时间格式xx-xx-xx xx:xx:xx | - | 1900-1-1 00:00:00 | 允许选择的开始时间 |
| end | 时间格式xx-xx-xx xx:xx:xx | - | 1900-1-1 00:00:00 | 允许选择的结束时间 |
👉Pros 事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @confirm | selected | object | 点击确认键时触发 |
selected全部返回的格式：
{year:-,month:-,day:-,hour:-,min:-,sec:-}
它是以 show-detail 来作为返回时间的基础。比如只显示年，那么返回时，就只有year字段。以此类推。
1
2
3
2
3
👉 城市地址下拉选择器
基本示例
技巧
default-value，默认赋值格式可以是多样化。比如["上海市", "市辖区", "徐汇区"]，也可以是 [0,0,0]
<tm-pickersCity @confirm="dateSe_3" :default-value="d_3" btn-color="bg-gradient-deep-purple-accent">
<tm-button theme="bg-gradient-deep-purple-accent">地区选择</tm-button>
</tm-pickersCity>
1
2
3
2
3
<script>
export default {
data() {
return {
d_3: ["天津市", "市辖区", "和平区"],
}
},
methods: {
dateSe_3(e){
console.log(e);
// ["天津市", "市辖区", "和平区"]
this.d_3 = e;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
👉 props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| title | String | 任意 | 选择 | 弹层标题 |
| btn-text | String | 任意 | 确认 | 底部按钮确认的文字 |
| btn-color | String | 任意主题色名称 | primary | 底部按钮确认的背景颜色仅支持主题色名称 |
| bg-color | String | 任意主题色名称 | white | 请填写背景的主题色名称 |
| default-value | Array<string> / Array<object> /Array<number> | - | [] | 可以使用.sync双向绑定,可以是数组：序列，对象，字符串赋值。 |
| item-height | Number | - | 88 | 项目的高度单位upx |
| black | Boolean | true/false | false | 是否开启暗黑模式。 |
| disabled | Boolean | true/false | false | 是否禁用。 |
| level | String | province/city/area | area | 显示的级别province:仅显示省，city仅显示省市，area：显示省市区。 |
👉Pros 事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @confirm | selected | Array | 点击确认键时触发 |
selected格式：
['江西','南昌','东湖区']
1
2
2
👉 所有例子的集合
<tm-pickersCity @confirm="dateSe_3" :default-value="d_3" btn-color="bg-gradient-deep-purple-accent">
<tm-button theme="bg-gradient-deep-purple-accent">地区选择</tm-button>
</tm-pickersCity>
1
2
3
2
3
<script>
export default {
data() {
return {
d_3: ["天津市", "市辖区", "和平区"],
}
},
methods: {
dateSe_3(e){
console.log(e);
// ["天津市", "市辖区", "和平区"]
this.d_3 = e;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
👉更新日志
2021年8月20日14:8:5 初始版本。