mt-picker 样式修改

// 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]
    },

  css : 

.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;
  }

  

 

posted @ 2019-11-04 18:06  Panax  阅读(1751)  评论(0编辑  收藏  举报