功能：

1. 實現自定義數字鍵盤，輸入數字超過兩位時不可輸入
2. 點選清空清空輸入框內的值
3. 提交時彈出提示框，並顯示所輸入的數字用--mint UI實現
   
   效果圖：

                <div class="number">
                    <div class="in-number">
                        <b>9.</b>
                        <input type="number" :value="numberval">
                                //將變數numberval賦給value屬性 ":"==v-bind
                    </div>
                    <ul class="numbutton">
                        <div class="hui-bottom">
                            <li @click="numberin(7)">7</li>
                            <li @click="numberin(8)" class="hui-min">8</li>
                            <li @click="numberin(9)">9</li> 
                        </div>
                        <div class="hui-bottom">
                            <li @click="numberin(4)">4</li>
                            <li @click="numberin(5)" class="hui-min">5</li>
                            <li @click="numberin(6)">6</li> 
                        </div>                       
                        <div class="hui-bottom">
                            <li @click="numberin(1)">1</li>
                            <li @click="numberin(2)" class="hui-min">2</li>
                            <li @click="numberin(3)">3</li> 
                        </div>
                        <div class="hui-bottom">
                            <li @click="numberin(0)">0</li>
                            <li @click="MessageBox()" class="hui-min">提交</li>
                            <li @click="clear">清空</li> 
                        </div>                                                
                    </ul>
                </div>
 

JS部分:

<script>
import { MessageBox } from 'mint-ui';//引入mint-ui的messagebox
export default {
    data() {
        return {
            numberval:''   //定義變數方便呼叫
        };
    },
    methods: {    //使用的自定義函式基本都寫這裡

        numberin(i){//點選數字觸發的函式，並將數字傳入
            if(this.numberval==''||val.length<2){ //取當前輸入框值的進行判斷
                this.numberval=this.numberval+i;
            }
            else{
                alert("輸入的數字不符合規則");
            }
        },
        clear(){ //清空
            this.numberval="";
        },
        MessageBox(){ //彈出框自定義寫法
             MessageBox.confirm('', { 
                message: '<b style="font-size:30px;">9.'+this.numberval+'<b>',
                                 //取輸入值拼接預設字首-9.**
                title: '打分', //彈出框標題
                // confirmButtonText: 'abc', 可自定 確定/取消按鈕
                // cancelButtonText: '123' 
                }).then(action => { 
                    if (action == 'confirm') {     //確認的回撥
                    console.log(1); 
                    }
                    }).catch(err => { 
                    if (err == 'cancel') {     //取消的回撥
                    console.log(2);
                    }   
                });
        }

    },
};
</script>
 

.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部分去掉  <div class="hui-bottom"></div> 這一層巢狀；

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;
        }

    }

使用彈性佈局來解決以上問題；

彈性佈局的學習避免篇幅過長，寫在下一篇裡