vue实现【简洁版软键盘】的封装以及调用

一、创建组件 Keyboard.vue

<template>
    <div class="keyboard_pop" @click.self="show=false" v-if="show">
        <ul class="keyboard">
            <li v-for="(key,index) in keyList" :key="index" track-by="$index" :class="{delete: key === 'Delete', capslock: key === 'Caps',  space: key === 'Space',  capsed: (key === 'Caps') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
        </ul>
    </div>
</template>
<script>
export default {
  props: {
    isShows: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false,
      keyList: [],
      normalKeyList: [],
      capsedKeyList: [],
      hasCapsed: false,
      keyvalue: this.keyboardtext
    }
  },
  created () {
    this.ready()
  },
  watch: {
    isShows (val) {
      this.show = val
    }
  },
  methods: {
    clickKey (key) {
      switch (key) {
        case 'Delete':
          let kbt = this.keyvalue
          this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt
          break

        case 'Space':
          this.keyvalue += ' '
          break

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

        default:
          this.keyvalue += key
          break
      }
      // console.log(this.keyvalue)
      this.$emit('updatekey', this.keyvalue)
    },
    ready () {
      let normalKeyList = [
        'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
        'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',
        'z', 'x', 'c', 'v', 'b', 'n', 'm', '-',
        'Caps', "'s", 'Space', 'Delete'
      ]

      let capsedKeyList = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-',
        'Caps', "'s", 'Space', 'Delete'
      ]

      this.keyList = this.normalKeyList = normalKeyList
      this.capsedKeyList = capsedKeyList
    }
  }

}
</script>

<style lang="scss" scoped>
.keyboard_pop{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 100vh;
}
.keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 50px 75px;

    li {
        float: left;
        margin: 0 10px 10px 0;
        width: 160px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #fff;
        border-radius: 15px;
        font-size: 32px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;

        &:hover {
            position: relative;
            cursor: pointer;
            background: #03BA82;
            color: #fff;
        }
        &:active {
            top: 1px;
            left: 1px;
        }
    }
    li:nth-child(n+11){
        margin-left: 15px;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 36px;
    }
    .delete {
        width: 300px;
    }
    .capslock {
        // clear: left;
        width: 300px;
    }
    .space {
        width: 830px;

    }
    .capsed {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
    }
}
</style>

二、页面两次封装

<template>
    <div>
      <div class="gap_input" @click="keyClick">
        <el-input v-model="currValue"/>
      </div>
      <Keyboard :isShows="keyShow" v-on:updatekey="GetKeyVal"></Keyboard>
    </div>
</template>
<script>
import Keyboard from '@/components/Keyboard/Keyboard'
export default {
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  components: {
    Keyboard
  },
  data () {
    return {
      keyShow: false,
      currValue: ''
    }
  },
  watch: {
    inputValue (val) {
      this.currValue = val
    }
  },
  methods: {
    keyClick () {
      this.keyShow = !this.keyShow
    },
    GetKeyVal (val) {
      if (val) {
         this.currValue = val.replace('undefined', '')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.gap_input{
  width: 30% !important;
  .el-input{
    width: 100%;
    pointer-events: none;
  }
  /deep/ .el-input__inner{
    border: 2px solid #333;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #333;
    border-radius: 0;
    font-size: 26px;
  }
}
</style>

三、页面调用

<template>
  <div>
     <KeyIndex :inputValue="input1"></KeyIndex>
     <KeyIndex :inputValue="input2"></KeyIndex>
  </div>
</template>
<script>
import KeyIndex from '@/components/Keyboard/keyIndex'
export default {
  components: {
    KeyIndex
  },
  data () {
    return {
      // 填空题
      input1: '',
      input2: '',
    }
  }
}
</script>

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~