软键盘的实现

在详设中，遇到了需要实现软键盘的地方，要实现的效果图如下

实现的代码如下：

<template>
  <div class="myIndexWrap">
    <div class="keyboardWrap">
      <h3>软键盘</h3>
      <input class="myInput" type="text" v-model="keyboards" />
      <!-- Keyboard组件 -->
      <Keyboard @updatekey="getKeyboardVal" class="keyboardWrap"></Keyboard>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import Keyboard from "@/components/Keyboard.vue";
export default {
  components: {
    Keyboard
  },
  data() {
    return {
      keyboards: "",
    };
  },
  mounted() {},
  methods: {
    //软键盘功能
    getKeyboardVal(val) {
      this.keyboards = val;
    },
  }
};
</script>

<style lang='scss' scoped>
.myIndexWrap {
  width: 1200px;
  min-height: 800px;
  height: auto;
  border: 1px solid #000;
  display: flex;
  flex-flow: column;
  .keyboardWrap {
    margin-left: 100px;
    margin-top: 50px;
  }
  .myInput {
    width: 300px;
    height: 30px;
    // 去除input框的阴影
    outline-color: invert;
    outline-style: none;
    outline-width: 0px;
    border: 1px solid #999;
    text-shadow: none;
    -webkit-appearance: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;
    // 软键盘图标
    background: url("../../assets/softBoard.png") no-repeat;
    background-size: 30px 30px;
    background-position: top right;
  }
}
</style>

Keyboard.vue

<template>
  <ul class="keyboard">
    <li
      v-for="(key, index) in keyList"
      :key="index"
      track-by="$index"
      :class="{
        delete: key === 'Delete',
        tab: key === 'Tab',
        capslock: key === 'Caps',
        enter: key === 'Enter',
        shift: key === 'Shift',
        space: key === 'Space',
        shifted: key === 'Shift' && hasShifted,
        capsed: key === 'Caps' && hasCapsed
      }"
      v-text="key"
      @click="clickKey(key)"
    ></li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      keyList: [],
      normalKeyList: [],
      shiftedKeyList: [],
      capsedKeyList: [],
      hasShifted: false,
      hasCapsed: false,
      keyvalue: ""
    };
  },
  created() {
    this.ready();
  },
  methods: {
    clickKey(key) {
      switch (key) {
        case "Delete":
          let kbt = this.keyvalue;
          this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
          break;

        case "Tab":
          this.keyvalue += "\t";
          break;

        case "Enter":
          this.keyvalue += "\n";
          break;

        case "Space":
          this.keyvalue += " ";
          break;

        case "Caps":
          this.hasCapsed = !this.hasCapsed;
          this.keyList = this.hasCapsed
            ? this.capsedKeyList
            : this.normalKeyList;
          break;

        case "Shift":
          this.hasShifted = !this.hasShifted;
          this.keyList = this.hasShifted
            ? this.shiftedKeyList
            : this.normalKeyList;
          break;

        default:
          this.keyvalue += key;
          break;
      }
      this.$emit("updatekey", this.keyvalue);
    },
    ready() {
      let normalKeyList = [
          "`",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "-",
          "=",
          "Delete",
          "Tab",
          "q",
          "w",
          "e",
          "r",
          "t",
          "y",
          "u",
          "i",
          "o",
          "p",
          "[",
          "]",
          "\\",
          "Caps",
          "a",
          "s",
          "d",
          "f",
          "g",
          "h",
          "j",
          "k",
          "l",
          ";",
          "'",
          "Enter",
          "Shift",
          "z",
          "x",
          "c",
          "v",
          "b",
          "n",
          "m",
          ",",
          ".",
          "/",
          "Shift",
          "Space"
        ],
        shiftedKeyList = [
          "~",
          "!",
          "@",
          "#",
          "$",
          "%",
          "^",
          "&",
          "*",
          "(",
          ")",
          "_",
          "+",
          "Delete",
          "Tab",
          "Q",
          "W",
          "E",
          "R",
          "T",
          "Y",
          "U",
          "I",
          "O",
          "P",
          "{",
          "}",
          "|",
          "Caps",
          "A",
          "S",
          "D",
          "F",
          "G",
          "H",
          "J",
          "K",
          "L",
          ":",
          '"',
          "Enter",
          "Shift",
          "Z",
          "X",
          "C",
          "V",
          "B",
          "N",
          "M",
          "<",
          ">",
          "?",
          "Shift",
          "Space"
        ],
        capsedKeyList = [
          "`",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "-",
          "=",
          "Delete",
          "Tab",
          "Q",
          "W",
          "E",
          "R",
          "T",
          "Y",
          "U",
          "I",
          "O",
          "P",
          "[",
          "]",
          "\\",
          "Caps",
          "A",
          "S",
          "D",
          "F",
          "G",
          "H",
          "J",
          "K",
          "L",
          ";",
          "'",
          "Enter",
          "Shift",
          "Z",
          "X",
          "C",
          "V",
          "B",
          "N",
          "M",
          ",",
          ".",
          "/",
          "Shift",
          "Space"
        ];

      this.keyList = this.normalKeyList = normalKeyList;
      this.shiftedKeyList = shiftedKeyList;
      this.capsedKeyList = capsedKeyList;
    }
  }
};
</script>

<style lang="scss" scoped>
.keyboard {
  width: 688px;
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;

  li {
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;

    &:hover {
      position: relative;
      border-color: gray;
      cursor: pointer;
    }
    &:active {
      top: 1px;
      left: 1px;
    }
  }

  .tab,
  .delete {
    width: 70px;
  }
  .capslock {
    width: 80px;
  }
  .enter {
    width: 77px;
  }
  .shift {
    width: 102px;
  }
  .space {
    clear: left;
    width: 681px;
  }
  .shifted {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
  }
  .capsed {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
  }
}
</style>

以上是所有代码，通过$emit将softBoard点击拿到的数据传递给父组件