实现一个自定义的小键盘 平果手机弹出系统输入法后 页面会被顶起来 一些需要点击的按钮因为位置不对 会失效 然后自己自己写了一个小键盘

<template>
  <div class="keyboard">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @touchstart="click(index)"
        :class="index === active ? 'active' : ''"
        @touchend="click2(index)"
      >
        <span>{{num(index)}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: Array(12),
      active: ""
    };
  },
  methods: {
    num(index) {
      let num = index + 1;
      if (num === 10) num = "";
      if (num === 11) num = 0;
      if (num === 12) num = "←";
      return num;
    },
    click(index) {
      this.active = index;
      let type = "num";
      let num = index + 1;
      if (num === 10) return;
      if (num === 11) num = 0;
      if (num === 12) {
        num = "backspace";
        type = "del";
      }
      this.$emit("change", type, num);
    },
    click2(index) {
      index = 15;
      this.active = index;
    }
  }
};
</script>
<style lang="less" scoped>
.keyboard {
  width: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33.333333333%;
      list-style: none;
      height: 50px;
      line-height: 50px;
      text-align: center;
      box-shadow: 0px 8px 57px 0px rgba(0, 0, 0, 0.04);
    }
    li.active {
      animation: activeanm 0.2s forwards;
    }

  }
  @keyframes activeanm {
    from {
      background: #34bdbe;
    }
    to {
      background: #fff;
    }
    20% {
    }
  }
}
</style>