使用mint-ui popup和picker实现手机端选择性别的功能踩到的坑

popup的使用很简单,代码如下:

        <mt-popup
          v-model="sexpopup"
          position="bottom">
          <mt-picker :slots="dateSlots" @change="onSexChange" 
          :visible-item-count="5" :show-toolbar="false" valueKey="label"></mt-picker>
        </mt-popup>

基本上,设定好v-model、和position的值即可.

有点绕的是picker的使用,设定slots值的时候,官方文档说得不是很清楚,只设定了纯字符串的数据,如下:

      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'
        }
      ]

那我们想设置对象数组的时候怎么办?根据文档,需要使用valueKey api,如下:

那么修改一下你的代码即可,具体代码如开头