zoukankan      html  css  js  c++  java
  • 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=" 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;
      }
    

      

  • 相关阅读:
    docker创建tomcat容器
    【转载】张一鸣:为什么 BAT 挖不走我们的人才?
    Elastic认证考试,请先看这一篇
    vs code 初始化vue项目框架
    Idea集成git常用命令
    pxc搭建mysql集群
    mysql无限级分类
    Java面试题大全
    SpringMVC和Spring
    Redis高级特性
  • 原文地址:https://www.cnblogs.com/panax/p/11793526.html
Copyright © 2011-2022 走看看