效果圖：
功能：
- 點選下方的數字，可以實現數字的輸入（該鍵盤有 刪除 隱藏功能）
- 可以留言輸入文字
實現思路：
- 定義一個變數（陣列），通過迴圈，將頁面內容正確渲染；對於頁面中的 刪除、隱藏 按鈕，因為是載入的圖片，所以，在定義該陣列中，刪除、隱藏 位置的資料需要用特殊易區別的字母或者數字表示（我用的是[1,2,3,'X',4,5,6,'X',7,8,9,'D','00',0,'B','B']，X 代表 刪除按鈕需要佔據的位置；D 代表隱藏按鈕佔據的位置； B 代表‘確定’ 按鈕佔據的位置）
- （‘修改價格’處，因為是div，所以，在輸入數字時，實際上是在該區域顯示為輸入內容的字串轉換後的數字）點選鍵盤按鈕時，判斷當前按鈕上面內容及在陣列中的位置編號，如果是 X 則在 價格區域的字串中去掉最後一個字元，如果是 非 X D B則用已經輸入的字串連線新輸入內容；
- 因為‘修改價格’處，為div，所以，沒有滑鼠閃爍的現狀（我的處理方式：在沒有輸入內容時，給該div新增一個左邊框，有輸入內容時，去掉該邊框）
注：顯示輸入價格區域為div（而非input），所以，不能調起手機自帶鍵盤，不能通過手機自帶鍵盤輸入
（話不多說，直接上程式碼）
Vue部分
<div class="popup-box noticeMain popup_noticeMain">
<div class="agreementNew">
<i class="price_delete" @click="hidePriceKeyboard()"></i>
</div>
<div class="bargain_price_btn_container">
<p class="price_input" @click="showPriceNum()">
<span class="price_span_text">修改價格</span>
<span :style="codeHideFlag ? 'border-left: 2px solid #6179a9;' : 'border:0;'" class="price_span_hide">
<span>{{offer_priceString}}</span>
</span>
</p>
</div>
<div class="bargain-text-txt">
<span class="toSeller_msg_txt">給買家捎句話</span>
<span @click="changeMsg()">換一換</span>
</div>
<div class="bargain_buyer_msg_input">
<span class="bargain_buyer_msg_num">{{ 15 - offer_message.length }}/15</span>
<input class="buyer_msg" type="text" name="" id="" v-model="offer_message" maxlength="15" @focus="hidePriceNum()"/>
</div>
<div v-show="num_showFlag" class="price_list">
<button v-for='(item,index) in price_Array'
@click.top="priceClick(item,index)"
:class="index == 11 ? 'price_sub' :
(index == 15 ? 'price_sub_black' :
(index == 3 ? 'price_del_container':
(index == 7 ? 'price_del_black' : '')))">
<span class="price_sub_txt" v-if="index == 11">
確定
</span>
<span class="price_sub_txt" v-else-if="index == 3" style="top:70%;">
<i class="price_de_btn"></i>
</span>
<span v-else-if="index == 7">
</span>
<span v-else-if="index == 15">
</span>
<span class="ccpft fi-stack" v-else-if="index == 14">
<i class="price_del"></i>
</span>
<span v-if="index != 14 && index != 11 && index != 15 && index != 7 && index != 3">{{item}}</span>
</button>
</div>
<div v-if="num_submit_btn_flag" class="price_submit_btn">確定</div>
</div>
複製程式碼JS部分（只記錄點選數字時，執行函式）
price_Array:[1,2,3,'X',4,5,6,'X',7,8,9,'D','00',0,'B','B'],//鍵盤上面顯示的內容
num_showFlag:false,//提交鍵盤顯示標示
num_submit_btn_flag: true,//留言確定按鈕
codeHideFlag：true,//沒有輸入內容時，價格顯示區域新增左邊框；true：顯示左邊框
offer_priceString : '' , //最終顯示 ‘價格’的字串
offer_priceString_str: '', //在點選過程中，操作的字串
priceClick(item,Index){ //出價的鍵盤
this.offer_priceString = this.offer_priceString == '' ? 0 : this.offer_priceString;
this.offer_priceString_str = this.offer_priceString + '';
if(item == 'X'){ //如果是X就是刪除
this.offer_priceString_str = this.offer_priceString_str.substr(0,this.offer_priceString_str.length-1)
this.offer_priceString = this.offer_priceString_str;
this.pricesuccHide = false;
}else if(Index == 11 || Index == 14 || Index == 15){
//14 15為鍵盤上面的“確定”按鈕；11為鍵盤上面的“隱藏”按鈕
this.hidePriceNum();
}else{
this.offer_priceString_str += item; //不是X就是新增
this.offer_priceString = Number(this.offer_priceString_str);
}
if(this.offer_priceString == 0){
this.codeHideFlag = true;
}else{
this.codeHideFlag = false;
}
},
複製程式碼CSS部分，採用less書寫
.price_input{
padding: .15rem 0;
height: 100%;
line-height: .58rem;
border-bottom: 1px solid #eee;
}
.bargain_price_btn_container{
background: #fff;
padding: 0 .3rem;
}
.price_flex span{
background: #BA0123 !important;
border-radius: 0 !important;
border: 0 !important;
}
.price_list button{
border: 1px solid #eee;
}
.popup-box.noticeMain .price_flex .offerBtn{
flex:1;
margin-left: 0;
margin-right: 0;
}
.popup-box.noticeMain .offerBtn{
margin-top:0.2rem;
margin-bottom:0.2rem;
color: #fff;
border-radius: 5px;
}
.price_delete{
font-size: .22rem;
color: #888;
display: inline-block;
// margin-right: .06rem;
}
.agreementNew{
text-align: right;
padding: .1rem .3rem;
height: .52rem;
line-height: .22rem;
}
.price_delete:before {
content: "";
width: 0.32rem;
height: 0.32rem;
background: url('../../asset/img/icon1.png') no-repeat;
background-size: 4.1rem 4.1rem;
background-position: -0.6rem -1.2rem;
display: inline-block;
vertical-align: middle;
}
.price_flex{
display: flex;
padding:0 0.2rem;
justify-content: space-between;
}
.price_list{
background-color: #fff;
border-top: 1px solid #eee;
}
.price_list button{
float: left;
// width: 2.453rem;
// width: 33.3%;
width: 25%;
border: 1px solid #eee;
border-top: none;
border-right: none;
font-weight: 600;
text-align: center;
line-height: 1.1rem;
font-size: 0.4rem;
}
.price_list:after{
display: block;
content: "";
clear: both;
}
.popup-box.noticeMain.popup_noticeMain{
background-color: #e6e5e5;
}
.offerBtn btn{
border-radius: 5px;
}
.bargain-text-txt{
color: #a6a6a6;
background: #fff;
padding: 0 0.3rem;
height: .88rem;
line-height: .88rem;
span:nth-child(2){
color: #DE4A09;
float: right;
font-size: .26rem;
font-family: 'PingFangSC-Regular';
}
}
.price_span_text{
color: #333;
}
.price_span_hide{
// color:#c6c6c6;
color:#BA0123;
font-weight: 700;
// border-left: 2px solid #6179a9;
margin-left: .15rem;
}
.bargain_buyer_msg_input{
height: 1.06rem;
padding: 0 0.3rem 0.2rem;
position: relative;
background: #fff;
input{
height: .66rem;
width: 100%;
line-height: 0.66rem;
background: #F7F7F7;
color: #999;
padding: 0.1rem 0.15rem;
}
}
.bargain_buyer_msg_num{
position: absolute;
right: 0.5rem;
top: .1rem;
color: #999;
}
.price_del{
background: url('../../asset/img/bargain/keyboard@3x.png') no-repeat;
background-size: contain;
width: .5rem;
height: .5rem;
display: inline-block;
position: absolute;
top: .15rem;
left: .15rem;
}
.price_sub{
background: #BA0123;
border: 1px solid #ba0123 !important;
color: #fff;
position: relative;
height: 1.12rem;
}
.price_sub_txt{
position: absolute;
top: 50%;
left: 30%;
}
.price_sub_black{
background: #BA0123;
border: 1px solid #ba0123 !important;
height: 1.12rem;
}
.price_de_btn{
background: url('../../asset/img/bargain/DeleteIcon@3x.png') no-repeat;
background-size: contain;
width: .5rem;
height: .5rem;
display: inline-block;
position: absolute;
top: .15rem;
left: .15rem;
}
.price_del_black{
background: #fff;
border-top: 0;
border-left: 1px solid #eee !important;
height: 1.12rem;
}
.price_del_container{
background: #fff;
// border-top: 1px solid #eee !important;
border-left: 1px solid #eee !important;
border-bottom: 0 !important;
// color: #fff;
position: relative;
height: 1.12rem;
}
.price_submit_btn{
background: #BA0123;
height: .96rem;
color: #fff;
line-height: .96rem;
text-align: center;
font-size: .36rem;
font-weight: 700;
font-family: 'PingFangSC-Medium';
}
.toSeller_msg_txt{
font-size: .24rem;
}
複製程式碼（此文僅僅作為本小白的知識積累，不喜勿噴，謝謝！）