// 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. liunx-centos-基础命令详解(1) -主要内容来自 —https://www.cnblogs.com/caozy/p/9261224.html

    关机:halt/poweroff :立刻关机reboot :立刻重启 shutdown -r now :立刻重启shutdown -h 00:00 :定时重启 now:立刻shutdown -h +n ...

  2. 树——binary-tree-postorder-traversal(树的前序遍历)

    问题: Given a binary tree, return the preorder traversal of its nodes' values. For example: Given bina ...

  3. leetcode x进制数 python3

    不少题目都是实现吧10进制数转换成x进制数,实际上都是一个套路,下面是7进制的,想换成什么进制,把7替换成相应数字即可,输出的是字符串 16,32进制这种有特殊要求的转不了,其他的应该通用 class ...

  4. thinkphp数据库连接

    https://www.kancloud.cn/manual/thinkphp5/118059 一.配置文件定义 常用的配置方式是在应用目录或者模块目录下面的database.php中添加下面的配置参 ...

  5. HDU 5386 Cover

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5386 题目大意:给一个初始矩阵(n×n).一个目标矩阵(n×n)和m个操作,要求找到一种操作顺序,使初 ...

  6. Nginx-常用命令和配置文件

    Nginx常用命令 1.启动命令 在/usr/local/nginx/sbin 目录下执行 ./nginx 2.关闭命令 在/usr/local/nginx/sbin 目录下执行 ./nginx s ...

  7. redis集群报错:(error) CLUSTERDOWN The cluster is down

    更换了电脑,把原来的电脑上的虚拟机复制到了新电脑上,启动虚拟机上的centos系统,然后启动redis集群(redis5版本),发现集群可以启动,redis进程也有,但是连接集群中的任意节点就报错,如 ...

  8. [CSP-S模拟测试]:引子(大模拟)

    题目描述 网上冲浪时,$Slavko$被冲到了水箱里,水箱由上而下竖直平面.示意图如下: 数字$i$所在的矩形代表一个编号为$i$的水箱.1号水箱为水箱中枢,有水管连出.除了$1$号水箱外,其他水箱上 ...

  9. React准备工作

    一.环境准备 使用react官方推荐的脚手架create-react-app 1.安装nodejs 2.npm install -g create-react-app  //全局安装脚手架 3.cre ...

  10. mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解

    文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...