天猫精灵IoT开放平台
SelectList 自定义列表选择器
更新时间：2019/08/02
访问次数：1454
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 高度 | Number | —— | 300 |
| date | 时间格式 | String | [‘YYYY-MM-DD hh:mm:ss’,‘YYYY-MM-DD hh:mm’, ‘YYYY-MM-DD hh’,‘YYYY-MM-DD’,‘YYYY-MM’,‘mm-dd’, ‘hh:mm:ss’,‘mm-dd hh:mm:ss’,‘mm-dd hh:mm’,‘mm-dd hh’] |
—— |
| activeColor | 选中的颜色 | string | —— | #333 |
| info | 自定义数据 | Array [{…}] | —— | —— |
| info[i].values | 自定义数据列表 | Array [{…}] | —— | —— |
| info[i].values[i].text | 文字 | String | —— | —— |
| info[i].activeVal | 选中的值 | String | —— | values第一个 |
| info[i].unit | 单位 | String | —— | —— |
| info[i].name | 定义好的自定义列表选项 | String | [‘years’, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’] | —— |
| info[i].max | name为 years 可用年列表最大值 例：2020 | String | —— | —— |
| info[i].min | name为 years 可用年列表最小值 例：1995 | String | —— | —— |
| info[i].plus | name为 days、minutes、seconds 可用间隔展示 例：5[0, 5, 10, …, 55] |
Number | —— | —— |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| selectBack | 滑动动画结束后回调 返回 [AText, BText, CText]格式 |
—— |
使用示例
<template>
<div id="select-list">
<select-list class="select-list" :info="selectInfo" v-on:selectBack="selectBack" ref="selectList"></select-list>
<select-list class="select-list" :height="150" date="12:24:30" activeColor="#0082aa" v-on:selectBack="selectBack"></select-list>
</div>
</template>
<script>
import Vue from "vue";
import { SelectList } from "genie-ui";
export default {
components: { SelectList },
data() {
return {
msg: 'This is select list',
selectInfo: [
// 自定义列表选择
{
activeVal: '妲已',
values: [{
text: '哪吒'
},{
text: '杨戬'
},{
text: '姜子牙'
},{
text: '雷震子'
},{
text: '妲已'
},{
text: '黄天化'
},{
text: '黄飞虎'
},{
text: '太乙真人'
}]
},
// 年份选择设置
{
activeVal: '2001',
max: 2020,
min: 1995,
unit: '年',
name: 'years',
},
// 月份选择设置
{
name: 'months'
},
// 天选择设置
{
name: 'days'
},
]
}
},
methods: {
// 多功能滑动回调
selectBack(val) {
console.log(val, 'select list touch move callback')
}
}
};
</script>
<style scoped>
.select-list{
margin: 20px 0;
}
</style>
