// 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. 记一次在mac上源码编译curl,使其支持NSS的过程

    一.背景 在一次学习https原理的过程中,希望客户端指定特定的cipher suites来抓包分析SSL/TLS的握手过程,就想到了使用curl工具,而不是使用浏览器. 接下来使用man curl找 ...

  2. tf.expand_dims

    想要增加一维,可以使用tf.expand_dims(input, dim, name=None)函数 t = np.array(np.arange(1, 1 + 30).reshape([2, 3, ...

  3. [python 学习] argparse模块

    https://docs.python.org/3/library/argparse.html#module-argparse

  4. flask之表单

    一:表单 表单用于注册,修改用户数据等场景. flask-wtf提供了一个包,可以创建表单:pip install flask-wtf 为了防止跨域请求,flask_wtf自己生成一个秘钥,用秘钥生成 ...

  5. Flask学习笔记01之环境搭建

    使用pycharm搭建Flask运行环境 1. 打开pycharm ,创建一个新的工程 2. 选择创建Flask项目 3. Flask项目创建成功,结构如下 4. 运行项目 5. 发送请求 over!

  6. 各操作系统下php.ini文件的位置在哪里

    这个问题虽然说很小,但是却还是经常会出现的问题,特别是刚入门php的同学更是如此.而这个问题呢,我也经常被问到,所以就在这里总结一下. 首先php.ini文件并不是隐藏文件,寻找php.ini文件的方 ...

  7. python之_init_()方法浅析

    在python的类中,我们会经常看到一个类中的一个方法_init_(self) ,比如下面的一个例子: class Student(object): def __init__(self,name,we ...

  8. 洛谷P1462 通往奥格瑞玛的道路(二分+spfa,二分+Dijkstra)

    洛谷P1462 通往奥格瑞玛的道路 二分费用. 用血量花费建图,用单源最短路判断 \(1\) 到 \(n\) 的最短路花费是否小于 \(b\) .二分时需要不断记录合法的 \(mid\) 值. 这里建 ...

  9. ANTLR4的IntelliJ IDEA配置

    1.配置的先导工作 jdk配置 IntelliJ IDEA安装配置 配置好ANTLR的java运行时环境,参考 2.下载intellij-plugin-v4.zip 下载地址 3.插件安装 4.测试安 ...

  10. Android中国官网资源网站

    现在android开发者官网在中国有中文版已经不是太大的新闻,为了平时查询资料和学习方便,记录如下. PS:建议用Google浏览器浏览,你懂的!! https://developers.google ...