当前位置：首页 > VUE

vue实现虚拟键盘

2026-02-17 20:17:10VUE

实现虚拟键盘的基本思路

在Vue中实现虚拟键盘，可以通过组件化方式构建一个可复用的键盘界面。核心在于动态渲染按键、处理用户输入事件以及与表单字段的联动。

创建虚拟键盘组件

新建一个Vue组件文件（如VirtualKeyboard.vue），定义键盘布局和基本样式：

<template>
  <div class="virtual-keyboard">
    <div v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex" class="keyboard-row">
      <button 
        v-for="key in row" 
        :key="key"
        @click="handleKeyPress(key)"
        class="keyboard-key"
      >
        {{ key }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyboardLayout: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '←'],
        ['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', 'Space']
      ]
    }
  },
  methods: {
    handleKeyPress(key) {
      this.$emit('key-pressed', key);
    }
  }
}
</script>

<style scoped>
.virtual-keyboard {
  display: inline-block;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
.keyboard-row {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.keyboard-key {
  min-width: 40px;
  height: 40px;
  margin: 0 3px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.keyboard-key:hover {
  background: #e0e0e0;
}
</style>

与输入框联动

在父组件中使用虚拟键盘，并实现输入逻辑：

<template>
  <div>
    <input 
      type="text" 
      v-model="inputValue" 
      @focus="showKeyboard = true"
      placeholder="点击输入..."
    />
    <VirtualKeyboard 
      v-if="showKeyboard"
      @key-pressed="processKeyPress"
      @close="showKeyboard = false"
    />
  </div>
</template>

<script>
import VirtualKeyboard from './VirtualKeyboard.vue';

export default {
  components: {
    VirtualKeyboard
  },
  data() {
    return {
      inputValue: '',
      showKeyboard: false
    }
  },
  methods: {
    processKeyPress(key) {
      if (key === '←') {
        this.inputValue = this.inputValue.slice(0, -1);
      } else if (key === 'Space') {
        this.inputValue += ' ';
      } else {
        this.inputValue += key;
      }
    }
  }
}
</script>

增强功能实现

添加大小写切换和特殊字符支持：

// 在VirtualKeyboard组件中
data() {
  return {
    isUppercase: false,
    keyboardLayout: [
      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '←'],
      ['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', 'Space']
    ]
  }
},
methods: {
  handleKeyPress(key) {
    if (key === '↑') {
      this.isUppercase = !this.isUppercase;
      return;
    }

    let outputKey = key;
    if (this.isUppercase && key.length === 1 && /[a-z]/.test(key)) {
      outputKey = key.toUpperCase();
    }
    this.$emit('key-pressed', outputKey);
  }
}

移动端优化

添加触摸事件支持并优化样式：

<template>
  <button 
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    @click="handleKeyPress(key)"
  >
    {{ key }}
  </button>
</template>

<style scoped>
@media (max-width: 768px) {
  .keyboard-key {
    min-width: 30px;
    height: 50px;
    font-size: 18px;
  }
}
</style>