// html : 

<div class="applyInformations" @click="chooseSex">

         <p>性别</p>

         <input type="text"  placeholder="请输入您的性别" v-model="sex"  disabled style="background:#fff;"/>

       </div>

 <mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style="width: 100%;height: 30%;">

          <p class="addChooseButton"><span @click.stop="cancelp(1)">取消</span><span @click.stop="cancelp(2)">确定</span></p>

          <mt-picker  :slots="slots" @change="onValuesChange" :visible-item-count="5" :show-toolbar="false"  ref="picker" value-key="name"></mt-picker>

        </mt-popup>

data() {

    return {

      phone:'',

      userName:'',

      sex:'',

      popupVisible:false,    // 时间控制选择开关

      slots: [

            {

              flex: 1,

              values: ['男','女'],

              className: 'slot1',

              textAlign: 'center'

            }

          ]

    }

  },

cancelp(index){

          const _this = this ;

          if(index===2){

            this.popupVisible = false ;

          }else{

            this.popupVisible = false ;

            _this.sex = ''

          }

    },

     // 小时选择（）

    onValuesChange(packer,val){

        console.log(packer,val,'分')

        const _this = this ;

        _this.sex = val[0]

    },

.applyInBox .picker-toolbar{

    height: 50px;

    padding-top: 15px;

  }

  .applyInBox .mint-datetime-action{

    font-size: 30px;

  }

  .applyInBox .picker-slot{

    font-size: 30px;

  }

  .applyInBox .picker-item.picker-selected{

    color:red;

  }