Picker

选择器，暂时未支持联动。Demo

引入

import { Picker } from 'vue-pmui';
// 全局使用
Vue.component(Picker.name, Picker);
// 或者
Vue.use(Picker);

例子

控制Picker组件显示的方法：

• 为组件添加ref属性调用组件的内部方法open和cancel

单选

<pm-button @click="open">水果</pm-button>
<p>选中的水果：{{ value[0] }}</p>
<!-- picker -->
<pm-picker
  ref="picker"
  v-model="value"
  :slots="slots">
</pm-picker>

export default {
  data() {
    return {
      value: ['士多啤梨'],
      slots: [
        { values: ['士多啤梨', '苹果', '橙', '西瓜', '哈密瓜', '香蕉'] }
      ]
    };
  },
  methods: {
    open() {
      this.$refs.picker.open();
    }
  }
};

时间选择器

<pm-button @click="open">TimePicker</pm-button>
<p>选中的时间：{{ result }}</p>
<!-- picker -->
<pm-picker
  ref="picker"
  v-model="value"
  :slots="slots">
</pm-picker>

function ceil(num) {
  return +num < 10 ? `0${num}` : num;
}

export default {
  data() {
    const now = new Date();
    return {
      value: [
        ceil(now.getHours()), // hour
        ceil(now.getMinutes()), // minute
        ceil(now.getSeconds()) // second
      ],
      slots: [
        { values: new Array(24).fill().map((v, i) => ceil(i)) },// 0~23
        { values: new Array(60).fill().map((v, i) => ceil(i)) },// 0~59
        { values: new Array(60).fill().map((v, i) => ceil(i)) } // 0~59
      ]
    };
  },
  computed: {
    result() {
      const val = this.value;
      const now = new Date();
      [
        'setHours',
        'setMinutes',
        'setSeconds'
      ].forEach((method, index) => {
        now[method](+val[index]);
      });
      return now;
    }
  },
  methods: {
    open() {
      this.$refs.picker.open();
    }
  }
};

Props

slots

Methods