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; }
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!