选择器 | Picker

选择器，支持多 slot 联动。

引入

import { Picker } from 'mint-ui';

Vue.component(Picker.name, Picker);

例子

传入 slots，当被选中的值发生变化时触发 change 事件。change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

change 事件

在 change 事件中，可以使用注册到 picker 实例上的一些方法：

• getSlotValue(index)：获取给定 slot 目前被选中的值
• setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
• getSlotValues(index)：获取给定 slot 的备选值数组
• setSlotValues(index, values)：设定给定 slot 的备选值数组
• getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
• setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中

slots

绑定到 slots 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名

API

Slot