vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用

功能：

实现自定义数字键盘，输入数字超过两位时不可输入

点击清空清空输入框内的值

提交时弹出提示框，并显示所输入的数字用--mint UI实现

效果图：

//将变量numberval赋给value属性 ":"==v-bind

提交

清空

JS部分:

.number{ //css使用less编写比较简单

position:fixed;

bottom: 0;

font-size: 19px;

width: 100%;

.in-number{

font-size: 20px;

width: 100%;

padding: 15px;

text-align: center;

background: #d0cece;

input{

width: 50px;

border: 0px;

// height: 22px;

font-size:19px;

}

.numbutton{

margin: auto;

padding: auto;

text-align: center;

li{

width:100/3.1%;

display: inline-block;

padding: auto;

}

.hui-bottom{

border-bottom: 1px solid #d0cece ;

line-height: 80px;

}

.hui-min{

border-left:1px solid #d0cece ;

border-right:1px solid #d0cece ;

}

以上代码耦合度不高，不需要的地方删掉对应的触发和函数即可

样式比较简单，方便修改，后期添加其他的功能也方便

补充：以上代码布局不恰当

存在问题：

iphone5 等屏幕较狭窄的屏幕上，样式有问题----数字按钮部分的宽度无法三个一行；

修改：HTML部分去掉

这一层嵌套；

css部分替换掉 .numbutton{代码块}

.numbutton{

width: 100%;

display: flex;

flex-direction: row;

flex-wrap: wrap;

li{

-ms-flex: 0 0 33.32%;

flex: 0 0 33.32%;

border-bottom: solid 1px #d0cece;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

align-items: center;

text-align: center;

line-height:2em;

}

li:nth-child(n+10){

border-bottom: 0px;

}

.hui-min{

border-right: solid 1px #d0cece;

border-left: solid 1px #d0cece;

}

使用弹性布局来解决以上问题；

弹性布局的学习避免篇幅过长，写在下一篇里

vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
小程序仿微信支付数字键盘，微信支付数字键盘
小程序仿微信支付数字键盘,微信支付数字键盘前段时间在一个小程序中需要写个支付页面,刚开始用input来唤起手机自带的数字键盘,甲方说不好看,然后说微信支付页面做的就比较好....于是就动手写了一个, ...
【Vue学习总结】21.Vue-UI框架之Mint UI的使用
接上篇<20.Vue路由中的嵌套> 上一篇我们讲解了Vue路由中的嵌套,本篇我们来介绍Vue的UI框架----Mint UI的使用. 本系列博文使用的Vue版本:2.6.11 一.基于Vu ...
android自定义数字键盘和字母键盘,Android自定义键盘的实现（数字键盘和字母键盘）...
Android自定义键盘的实现(数字键盘和字母键盘) 发布时间:2020-09-04 03:18:48 来源:脚本之家阅读:100 作者:浪淘沙xud 在项目中,产品对于输入方式会有特殊的要求,需要 ...
安卓键盘加上数字_Android自定义键盘的实现（数字键盘和字母键盘）
在项目中,产品对于输入方式会有特殊的要求,需要对输入方式增加特定的限制,这就需要采用自定义键盘.本文主要讲述数字键盘和字母键盘的自定义实现. 键盘效果: 自定义键盘的实现步骤如下: 自定义Custom ...
android 自定义数字软键盘,Android自定义键盘的实现（数字键盘和字母键盘）
在项目中,产品对于输入方式会有特殊的要求,需要对输入方式增加特定的限制,这就需要采用自定义键盘.本文主要讲述数字键盘和字母键盘的自定义实现. 自定义键盘的实现步骤如下: 自定义CustomKeyboa ...
vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
vue自定义全局组件(或自定义插件)
最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use ...

vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用

vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用相关推荐

最新文章

热门文章

vue 自定义键盘组件_vue 自定义 数字键盘+mint UI MessageBox的应用

vue 自定义键盘组件_vue 自定义 数字键盘+mint UI MessageBox的应用相关推荐

最新文章

热门文章

vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用

vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用相关推荐