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

浙公网安备 33010602011771号