[JavaScript知识库]vue+vant实现自定义键盘样式

最终效果如下面所示

代码部分

<!-- 英文 数字 键盘 -->
<div class="allBoard">
  <van-popup
       v-model="show_allBoard"
       position="bottom"
       :overlay="false"
        overlay-class="displayNone"
  >
    <div class="plate_number_box">
       <!-- 点击对应的字母或数字，进行输入 -->
       <van-button
          size="small"
          v-for="(item, index) in English_Number"
          :key="item.id"
          @click="checkEnglish_num(index)"
          >{{ item.name }}</van-button
        >
          <!-- <div class="close-box" @click.stop="close_keyboard">
            <div>╳</div>
            <li></li>
          </div> -->
     </div>
   </van-popup>
</div>                               

data() {
  return {
      loginForm: {
        code: "",
      },
      show_allBoard: true, //是否显示英文数字键盘
      English_Number: [
        { name: "1", id: 28 },
        { name: "2", id: 29 },
        { name: "3", id: 30 },
        { name: "4", id: 31 },
        { name: "5", id: 32 },
        { name: "6", id: 33 },
        { name: "7", id: 34 },
        { name: "8", id: 35 },
        { name: "9", id: 36 },
        { name: "0", id: 37 },
        { name: "删除", id: 99 },
        { name: "Q", id: 38 },
        { name: "W", id: 39 },
        { name: "E", id: 40 },
        { name: "R", id: 41 },
        { name: "T", id: 42 },
        { name: "Y", id: 43 },
        { name: "U", id: 44 },
        { name: "I", id: 45 },
        { name: "O", id: 46 },
        { name: "P", id: 47 },
        { name: "A", id: 48 },
        { name: "S", id: 49 },
        { name: "D", id: 50 },
        { name: "F", id: 51 },
        { name: "G", id: 52 },
        { name: "H", id: 53 },
        { name: "J", id: 54 },
        { name: "K", id: 55 },
        { name: "L", id: 56 },
        { name: "Z", id: 57 },
        { name: "X", id: 58 },
        { name: "C", id: 59 },
        { name: "V", id: 60 },
        { name: "B", id: 61 },
        { name: "N", id: 62 },
        { name: "M", id: 63 },
        { name: "确认", id: 100 },
      ],
      numArr: [],
    };
  },
methods:{
    // 虚拟键盘
    checkEnglish_num(index) {
      // 如果点击删除键，删除 numArr 的最后一个值
      if (this.English_Number[index].id == 99) {
        //删除
        this.numArr.pop();
        this.loginForm.code = this.numArr.toString().replace(/,/g, "");
        // // 如果 numArr 里面被删的没有值了，切换键盘
        // if (this.numArr.length == 0) {
        //   this.show_allBoard = false;
        // }
      } else if (this.English_Number[index].id == 100) {
        //确定
        //this.submit();
      } else {
        // 把选中的值 push 到 numArr 内
        this.numArr.push(this.English_Number[index].name);
        // // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
        // if (this.numArr.length > 7) {
        //   this.numArr.pop();
        // }
        this.loginForm.code = this.numArr.toString().replace(/,/g, "");
      }
    },
    // 关闭虚拟键盘
    close_keyboard() {
      this.show_allBoard = false;
    },
    submit() {
      // 键盘最后输入值
      if (this.loginForm.code == "") {
        handleMessage("输入内容不能为空!");
        return;
      }
      console.log(this.loginForm.code)
    },
}

.allBoard {
  .van-popup {
    @extend .overflow-y;
  }
  .plate_number_box {
    width: 100%;
    @extend .class-plate-box;
    .close-box {
      @extend .class-close-box;
      div {
        @extend .class-close-box-div;
      }
      li {
        @extend .class-close-box-li;
      }
    }
    .van-button--small {
      width: 8.8%;
      height: 2rem;
      @extend .class-van-button-small;
    }
    .van-button--small:nth-child(1) {
      margin-bottom: 5px;
    }
    .van-button--small:nth-child(12) {
      margin-left: 5%;
    }
    .van-button--small:nth-child(22) {
      margin-left: 9%;
    }
    .van-button--small:nth-child(31) {
      margin-left: 11.5%;
    }
    .van-button--small:last-child {
      width: 13%;
    }
  }
}
.displayNone {
  display: none !important;
}