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

  

mt-picker 样式修改的更多相关文章

  1. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. ExtJS控件样式修改及美化

    Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...

  3. 帝国cms 列表页分页样式修改美化【2】

    上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...

  4. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  5. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  6. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  7. Excel图表编辑---表格移动,样式修改

    一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ...

  8. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  9. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

  10. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

随机推荐

  1. javaweb各种框架组合案例(九):springboot+tk.mybatis+通用service

    一.项目结构 二.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  2. linux使用v 2ray

    一.安装配置服务端程序 是时候使用 了,因为相对安全,使用方法很简单,使用root权限执行以下命令即可 $ sudo -i 一顿安装后如图 输入 命令可以查看链接,然后在客户端使用这个链接就能配置好了 ...

  3. bzoj2325 [ZJOI2011]道馆之战 树链剖分+DP+类线段树最大字段和

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2325 题解 可以参考线段树动态维护最大子段和的做法. 对于线段树上每个节点 \(o\),维护 ...

  4. BZOJ 1233 干草堆 (单调队列优化DP)

    $ BZOJ~1233~~ $ 干草堆: (题目特殊性质) $ solution: $ 很妙的一道题目,开始看了一眼觉得是个傻逼贪心,从后往前当前层能多短就多短,尽量节省花费.但是这是DP专题,怎么会 ...

  5. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  6. 解决 pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on '127.0.0.1' ([Errno 61] Conne

    pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on '127.0.0.1' ([Errno 61] ...

  7. django 的保护机制

  8. FPGA资源平民化的新晋- F9 技术解析

    FPGA (现场可编程门阵列)由于其硬件并行加速能力和可编程特性,在传统通信领域和IC设计领域大放异彩.一路走来,FPGA并非一个新兴的硬件器件,由于其开发门槛过高,硬件加速算法的发布和部署保护要求非 ...

  9. Angular:实现组件间双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么父子组件间能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  10. Transaction 在同一个类中不生效

    参考:https://blog.csdn.net/qq_30336433/article/details/83338835 最近在开发项目中踩到一个坑,以此记录下来.以备后来人借鉴 1.相信使用spr ...