效果图：
功能：
- 点击下方的数字，可以实现数字的输入（该键盘有 删除 隐藏功能）
- 可以留言输入文字
实现思路：
- 定义一个变量（数组），通过循环，将页面内容正确渲染；对于页面中的 删除、隐藏 按钮，因为是加载的图片，所以，在定义该数组中，删除、隐藏 位置的数据需要用特殊易区别的字母或者数字表示（我用的是[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;
}
复制代码（此文仅仅作为本小白的知识积累，不喜勿喷，谢谢！）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
