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;
}

 二、第二种效果如下图所示(弹框+倒计时功能)

 代码部分

<section class="messageMask" v-if="ifWritePopUp" @click="clickFocus">
      <div class="messageMaskContent" style="height: 52em">
        <div class="message-title" style="height: 25%">提示</div>
        <div class="message-title-close" @click="onClose">
          关闭({{ countDownVal }}S)
        </div>
        <div class="message-content">
          <div class="screen-sign-mid">
            <div class="screen-sign-mid-inner">
              <input
                class="self-el-input"
                type="text"
                v-model="cardNo"
                ref="cardNoInput"
              />
              <button
                class="self-el-button"
                type="button"
                @click.stop="checkIn()"
              >
                确认
              </button>
            </div>
          </div>
          <div class="screen-sign-footer">
            <div class="keyboard-wrap">
              <div
                class="key-group-item"
                v-for="(keyItem, index) in keyList"
                :key="index"
              >
                <div
                  class="key-item"
                  :style="item.type == 'letter' ? '' : 'width:155px;'"
                  v-for="(item, index) in keyItem"
                  :key="index"
                  :data-type="item.type"
                  @click.stop="keyboardClick"
                >
                  <span class="vertical-center">{{ item.text }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

 

data() {
  return {
      ifWritePopUp: false,
      countDownVal: 30,
      showTimer: null,
      cardNo: "",//键盘输入内容
      keyList: [
        // 键盘布局
        [
          { text: "1", type: "letter" },
          { text: "2", type: "letter" },
          { text: "3", type: "letter" },
          { text: "4", type: "letter" },
          { text: "5", type: "letter" },
          { text: "6", type: "letter" },
          { text: "7", type: "letter" },
          { text: "8", type: "letter" },
          { text: "9", type: "letter" },
          { text: "0", type: "letter" },
        ],
        [
          { text: "Q", type: "letter" },
          { text: "W", type: "letter" },
          { text: "E", type: "letter" },
          { text: "R", type: "letter" },
          { text: "T", type: "letter" },
          { text: "Y", type: "letter" },
          { text: "U", type: "letter" },
          { text: "I", type: "letter" },
          { text: "O", type: "letter" },
          { text: "P", type: "letter" },
        ],
        [
          { text: "A", type: "letter" },
          { text: "S", type: "letter" },
          { text: "D", type: "letter" },
          { text: "F", type: "letter" },
          { text: "G", type: "letter" },
          { text: "H", type: "letter" },
          { text: "J", type: "letter" },
          { text: "K", type: "letter" },
          { text: "L", type: "letter" },
        ],
        [
          { text: "Z", type: "letter" },
          { text: "X", type: "letter" },
          { text: "C", type: "letter" },
          { text: "V", type: "letter" },
          { text: "B", type: "letter" },
          { text: "N", type: "letter" },
          { text: "M", type: "letter" },
        ],
        [
          { text: "回删", type: "delete" },
          { text: "重置", type: "reset" },
        ],
      ],
    };
},
created() {
    this.beginCountDown();
    this.ifWritePopUp = true;
    this.$nextTick(function () {
      this.$refs["cardNoInput"].focus();
    });
},
methods:{
    // 处理数字键盘事件
    keyboardClick(event) {
      let text = event.currentTarget.innerText;
      let type = event.currentTarget.getAttribute("data-type");
      switch (type) {
        case "letter":
          this.cardNo += text;
          break;
        case "delete":
          this.cardNo = this.cardNo.substr(0, this.cardNo.length - 1);
          break;
        case "reset":
          this.cardNo = "";
          break;
      }
      this.$refs.cardNoInput.focus();
    },
    checkIn() {
      //手动输入
      if (this.cardNo == "") {
        this.$refs["cardNoInput"].focus();
        return;
      }
      //执行输入后确定操作
      this.cardNo = "";
    },
    beginCountDown(time = 30) {
      //开启提示窗倒计时
      //直接倒计时30s
      if (this.showTimer) {
        clearInterval(this.showTimer);
      }
      this.countDownVal = time;
      this.showTimer = setInterval(() => {
        if (this.countDownVal > 1) {
          this.countDownVal--;
        } else {
          clearInterval(this.showTimer);
          this.showTimer = null;
          this.onClose();
        }
      }, 1000);
    },
    onClose() {
      if (this.ifWritePopUp) {
        this.ifWritePopUp = false;
        this.cardNo = "";
      }
    },
    clickFocus() {
      //点击屏幕任何地方都聚焦
      if (this.ifWritePopUp) {
        this.$refs.cardNoInput.focus();
      }
    },
}

.messageMask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.messageMaskContent {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 40%;
  height: 55em;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 20px;
  box-shadow: 3px 8px 5px rgba(0, 0, 0, 0.3);
}

.message-title {
  position: relative;
  width: 100%;
  height: 25%;
  background-color: #1989fa;
  text-align: center;
  font-weight: bold;
  font-size: 50px;
  color: #fff;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-title-close {
  position: absolute;
  font-size: 40px;
  right: 15px;
  top: 15px;
  color: #fff;
}

.message-content {
  height: 70%;
  padding: 10px 20px 0;
}

.screen-sign-mid {
  position: relative;
  width: 100%;
  height: 80px;
  padding: 3px;
  box-sizing: border-box;
  background-color: #fff;
  color: #34592d;
}

.screen-sign-mid .screen-sign-mid-inner {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

.self-el-input {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0 100px 0 15px;
  font-size: 50px;
  color: #000;
  border: 2px solid #1989fa;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  outline: 0;
}

.self-el-button {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 120px;
  height: 70px;
  margin: 0;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 5px;
  line-height: 1;
  border: 1px solid #ccc;
  color: #000;
  background-color: #ccc;
  white-space: nowrap;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .1s;
  transition: .1s;
  outline: 0;
  cursor: pointer;
}

.screen-sign-main .screen-sign-footer {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  text-align: center;
  color: #333;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.keyboard-wrap {
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

.keyboard-wrap .key-group-item {
  width: 100%;
  height: auto;
  text-align: center;
}

.key-group-item .key-item {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 65px;
  line-height: 65px;
  margin: 0 2px 8px 2px;
  color: #000;
  font-size: 40px;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 15px;
  background-color: #bbb;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.key-item:hover {
  background-color: #ccc;
}

.key-item:active {
  background-color: #666;
}