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

功能：

1. 实现自定义数字键盘，输入数字超过两位时不可输入
2. 点击清空清空输入框内的值
3. 提交时弹出提示框，并显示所输入的数字用--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;
        }

    }

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

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