vue自定义键盘

效果图：

功能：

• 点击下方的数字，可以实现数字的输入（该键盘有 删除 隐藏功能）
• 可以留言输入文字

实现思路：

• 定义一个变量（数组），通过循环，将页面内容正确渲染；对于页面中的 删除、隐藏 按钮，因为是加载的图片，所以，在定义该数组中，删除、隐藏 位置的数据需要用特殊易区别的字母或者数字表示（我用的是[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部分

"popup-box noticeMain popup_noticeMain">
          
"agreementNew">
            "price_delete" @click="hidePriceKeyboard()">
          
          
"bargain_price_btn_container">
            
"price_input" @click="showPriceNum()">
              "price_span_text">修改价格
              "codeHideFlag ? 'border-left: 2px solid #6179a9;' : 'border:0;'" class="price_span_hide">
                {{offer_priceString}}
              
            
          
          
"bargain-text-txt">
            "toSeller_msg_txt">给买家捎句话
            "changeMsg()">换一换
          
          
"bargain_buyer_msg_input">
            "bargain_buyer_msg_num">{{ 15 - offer_message.length }}/15
            "buyer_msg" type="text" name="" id="" v-model="offer_message" maxlength="15" @focus="hidePriceNum()"/>
          
          
"num_showFlag" class="price_list">
            '(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' : '')))">
              "price_sub_txt" v-if="index == 11">
                确定
              
              "price_sub_txt" v-else-if="index == 3" style="top:70%;">
                "price_de_btn">
              
              "index == 7">
              
               "index == 15">
              
              "ccpft fi-stack" v-else-if="index == 14">
                "price_del">
              
              "index != 14 && index != 11 && index != 15 && index != 7 && index != 3">{{item}}
            
          
          
"num_submit_btn_flag" class="price_submit_btn">确定
        
复制代码

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/[email protected]') 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/[email protected]') 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;
}
复制代码

---

（此文仅仅作为本小白的知识积累，不喜勿喷，谢谢！）