移动端自定义键盘

代码**：html**

<van-popup v-model="NumberShow" position="bottom">
  <div class="number_title flex alic justs">
    <img :src="images[1]" alt @click="NumberShow=false" class="img ml15" />
    <div class="center fz15">输入血糖</div>
    <img :src="images[0]" alt @click="confirmEvent(value)" class="img mr15" />
  </div>
  <div class="number_input flex alic justc bgf">
    <div v-if="!value" class="fz50 mr5 color1F">0.0</div>
    <div v-else class="fz50 mr5 color1F">{{value}}</div>
    <div class="fz12 mt20">mmol/L</div>
  </div>
  <div class="two_btn flex alic tc bgf fz30">
    <div class="w50 low" @click="confirmEvent('low')">low</div>
    <div class="w50 high" @click="confirmEvent('high')">high</div>
  </div>
  <div class="number_key flex alic wrap">
    <div
      class="item w33 tc fz30 fw9"
      v-for="item in arr"
      :key="item"
      @click="onInput(item)"
    >{{item}}</div>
    <div class="item w33 tc fz30 fw9" @click="onDelete">删除</div>
  </div>
</van-popup>

style
/* 键盘 */
.number_title {
height: 0.51rem;
line-height: 0.51rem;
text-align: center;
background: #f0f0f4;
}
.leftofright_icon {
height: 0.25rem;
width: 0.38rem;
}
.center {
flex: 1;
}
.number_input {
height: 1.5rem;
}

.two_btn {
height: 0.6rem;
border-top: 0.01rem dashed #999;
border-bottom: 0.01rem dashed #999;
line-height: 0.6rem;
background: #f0f0f4;
}
.w50 {
width: 50%;
}
.low {
color: #88d5ff;
border-right: 0.01rem dashed #999;
}
.high {
color: #e75900;
}
.number_key {
background: #f0f0f4;
}
.item {
/* width: calc(100% / 3); */
height: 0.6rem;
line-height: 0.6rem;
border-bottom: 0.01rem dashed #999;
border-right: 0.01rem dashed #999;
}
.item:nth-child(3),
.item:nth-child(6),
.item:nth-child(9),
.item:nth-child(12) {
border-right: none;
}
js
// 展示数字键盘
keyboard() {
this.value = “”;
this.NumberShow = true;
},
// 键盘事件
onInput(value) {
console.log(value);
if (this.value.length > 5) {
return;
}
this.value = this.value + value;
console.log(this.value);
},
//键盘删除功能
onDelete() {
this.value = this.value.slice(0, -1);
console.log(this.value);
},
confirmEvent(value) {
this.value = value;
this.form.bloodPressure = value;
console.log(this.value);
this.NumberShow = false;
// this.$emit(“confirm”, this.value);
},