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

功能：

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

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

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

效果图：

9.

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

7

8

9

4

5

6

1

2

3

0

提交

清空

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;

}

}

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

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