使用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,如下:


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


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值