SelectList 自定义列表选择器 - 图1

参数

参数 说明 类型 可选值 默认值
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’]		 ——
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]格式		 ——

使用示例

  1. <template>
  2.   <div id="select-list">
  3.     <select-list class="select-list" :info="selectInfo" v-on:selectBack="selectBack"  ref="items"></select-list>
  4.     <select-list class="select-list" :height="150" date="12:24:30" v-on:selectBack="selectBack"></select-list>
  5.   </div>
  6. </template>
  8. <script>
  9. import Vue from "vue";
  10. import { SelectList } from "genie-ui";
  12. export default {
  13.   components: { SelectList },
  14.   data() {
  15.     return {
  16.       msg: 'This is select list',
  17.       selectInfo: [
  18.         // 自定义列表选择
  19.         {
  20.           activeVal: '妲已',
  21.           values: [{
  22.             text: '哪吒'
  23.           },{
  24.             text: '杨戬'
  25.           },{
  26.             text: '姜子牙'
  27.           },{
  28.             text: '雷震子'
  29.           },{
  30.             text: '妲已'
  31.           },{
  32.             text: '黄天化'
  33.           },{
  34.             text: '黄飞虎'
  35.           },{
  36.             text: '太乙真人'
  37.           }]
  38.         },
  39.         // 年份选择设置
  40.         {
  41.           activeVal: '2001',
  42.           max: 2020,
  43.           min: 1995,
  44.           unit: '年',
  45.           name: 'years',
  46.         },
  47.         // 月份选择设置
  48.         {
  49.           name: 'months'
  50.         },
  51.         // 天选择设置
  52.         {
  53.           name: 'days'
  54.         },
  55.       ]
  56.     }
  57.   },
  58.   methods: {
  59.     // 手动设置值 PS：需要在组件上 加上 ref="items" 才可以
  60.     refresh() {
  61.       this.selectInfo[0].activeVal = '杨戬'
  62.       this.$refs.items.init();
  63.     },
  65.     // 多功能滑动回调
  66.     selectBack(val) {
  67.       console.log(val, 'select list touch move callback')
  68.     }
  69.   }
  70. };
  71. </script>
  72. <style scoped>
  73. .select-list{
  74.     margin: 20px 0;
  75. }
  76. </style>