vue实现手机键盘

实现手机键盘的Vue方案

使用第三方库vue-touch-keyboard

安装依赖库：

npm install vue-touch-keyboard --save

注册组件：

import VueTouchKeyboard from 'vue-touch-keyboard';
Vue.use(VueTouchKeyboard);

模板中使用：

<vue-touch-keyboard 
  :layout="'qwerty'" 
  :input="inputField" 
  @change="onChange"
/>

自定义键盘组件

创建Keyboard.vue组件：

<template>
  <div class="virtual-keyboard">
    <div v-for="row in layout" :key="row.join('')">
      <button 
        v-for="key in row" 
        :key="key"
        @click="handleKeyPress(key)"
      >{{ key }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layout: [
        ['1','2','3'],
        ['4','5','6'],
        ['7','8','9'],
        ['*','0','#']
      ]
    }
  },
  methods: {
    handleKeyPress(key) {
      this.$emit('key-press', key);
    }
  }
}
</script>

集成输入控制

父组件中使用：

<input v-model="inputValue" @focus="showKeyboard = true"/>

<Keyboard 
  v-if="showKeyboard"
  @key-press="handleKeyInput"
  @close="showKeyboard = false"
/>

methods: {
  handleKeyInput(key) {
    this.inputValue += key;
  }
}

样式优化

添加CSS样式：

.virtual-keyboard {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f0f0f0;
}

.virtual-keyboard button {
  width: 30%;
  height: 50px;
  margin: 5px;
  font-size: 1.2em;
}

高级功能实现

添加特殊功能键：

layout: [
  ['1','2','3','←'],
  ['4','5','6','Clear'],
  ['7','8','9','Done'],
  ['.','0',' ','']
]

处理功能键逻辑：

handleKeyPress(key) {
  if(key === '←') {
    this.$emit('backspace');
  } 
  else if(key === 'Clear') {
    this.$emit('clear');
  }
  else if(key === 'Done') {
    this.$emit('close');
  }
  else {
    this.$emit('key-press', key);
  }
}

响应式布局

使用媒体查询适配不同屏幕：

@media (min-width: 768px) {
  .virtual-keyboard {
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
}

输入法切换

实现多语言布局切换：

layouts: {
  en: [['Q','W','E'],['A','S','D']],
  zh: [['拼','音','输'],['入','模','式']]
}

切换方法：

switchLanguage(lang) {
  this.currentLayout = this.layouts[lang];
}