Vue 模拟键盘组件封装方法与使用方法详解

原创

小焱

发布于 2025-06-11 07:39:52

31700

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

以下是Vue模拟键盘组件的使用方法和封装方法的详细说明：

一、组件使用方法

1. 安装与引入组件

将封装好的键盘组件（如VirtualKeyboard.vue）放入项目的components目录，然后在需要使用的Vue文件中引入：

<template>
  <div class="app">
    <SecureInput />
  </div>
</template>

<script setup>
import SecureInput from './components/SecureInput.vue';
</script>

2. 基础用法

通过v-model双向绑定输入值，使用type指定键盘类型：

<template>
  <div>
    <input 
      type="text" 
      v-model="inputValue" 
      readonly 
      @focus="showKeyboard = true" 
    />
    
    <VirtualKeyboard
      v-if="showKeyboard"
      v-model="inputValue"
      type="number"  // 可选：number/letter/symbol
      @confirm="confirmInput"
      @close="showKeyboard = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VirtualKeyboard from './components/VirtualKeyboard.vue';

const inputValue = ref('');
const showKeyboard = ref(false);

const confirmInput = () => {
  console.log('输入完成:', inputValue.value);
  // 处理输入逻辑...
};
</script>

3. 高级配置

通过props自定义键盘行为：

<VirtualKeyboard
  v-model="inputValue"
  type="letter"
  :dark-mode="true"          // 暗黑模式
  :disabled="isDisabled"    // 禁用状态
  :show-confirm="true"      // 显示确认按钮
  @input="onInput"          // 输入事件
  @confirm="onConfirm"      // 确认事件
/>

4. 自定义样式

通过CSS变量覆盖默认样式：

/* 在App.vue或全局样式中 */
:root {
  --keyboard-bg: #2a2a2a;      /* 键盘背景 */
  --key-bg: #3a3a3a;           /* 按键背景 */
  --key-text: #ffffff;         /* 按键文本 */
  --key-active: #5a5a5a;       /* 按键按下效果 */
  --confirm-bg: #4caf50;       /* 确认按钮背景 */
}

二、组件封装方法

1. 目录结构

推荐组件结构：

components/
└── VirtualKeyboard/
    ├── VirtualKeyboard.vue    # 主组件
    ├── KeyButton.vue          # 按键组件
    ├── layouts/               # 键盘布局配置
    │   ├── number.js
    │   ├── letter.js
    │   └── symbol.js
    └── styles/                # 样式文件
        └── keyboard.css

2. 核心组件代码

以下是VirtualKeyboard.vue的完整实现：

<template>
  <div class="virtual-keyboard" :class="{ 'dark-mode': darkMode }">
    <!-- 键盘头部 -->
    <div class="keyboard-header">
      <slot name="header">
        <h3>{{ keyboardTitle }}</h3>
      </slot>
    </div>
    
    <!-- 键盘主体 -->
    <div class="keyboard-body">
      <div class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
        <KeyButton
          v-for="(key, keyIndex) in row"
          :key="keyIndex"
          :key-data="key"
          @click="handleKeyClick(key)"
          :disabled="disabled"
        />
      </div>
    </div>
    
    <!-- 键盘底部 -->
    <div class="keyboard-footer">
      <slot name="footer">
        <button 
          v-if="showConfirm" 
          @click="$emit('confirm')"
          class="confirm-btn"
        >
          确认
        </button>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits, ref } from 'vue';
import KeyButton from './KeyButton.vue';
import { generateLayout } from './layouts';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'number',
    validator: (val) => ['number', 'letter', 'symbol'].includes(val)
  },
  darkMode: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showConfirm: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(['update:modelValue', 'confirm', 'close']);

// 计算属性：当前键盘布局
const keyboardLayout = computed(() => generateLayout(props.type));

// 计算属性：键盘标题
const keyboardTitle = computed(() => {
  const titles = {
    number: '数字键盘',
    letter: '字母键盘',
    symbol: '符号键盘'
  };
  return titles[props.type] || '键盘';
});

// 处理按键点击
const handleKeyClick = (key) => {
  if (props.disabled) return;
  
  if (key === 'delete') {
    // 删除最后一个字符
    emits('update:modelValue', props.modelValue.slice(0, -1));
  } else if (key === 'clear') {
    // 清空输入
    emits('update:modelValue', '');
  } else if (key === 'close') {
    // 关闭键盘
    emits('close');
  } else {
    // 普通输入
    emits('update:modelValue', props.modelValue + key);
  }
};
</script>

<style scoped src="./styles/keyboard.css"></style>

3. 按键组件实现

KeyButton.vue负责渲染单个按键：

<template>
  <button
    class="key-button"
    :class="{
      'special-key': isSpecialKey,
      'disabled': disabled
    }"
    @click.stop="handleClick"
    :disabled="disabled"
  >
    {{ keyData.label || keyData }}
  </button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  keyData: {
    type: [String, Object],
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['click']);

// 判断是否为特殊按键
const isSpecialKey = computed(() => {
  const specialKeys = ['delete', 'clear', 'close', 'caps'];
  return typeof props.keyData === 'string' && specialKeys.includes(props.keyData);
});

// 处理按键点击
const handleClick = () => {
  if (!props.disabled) {
    emits('click', typeof props.keyData === 'string' ? props.keyData : props.keyData.value);
  }
};
</script>

<style scoped>
.key-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 5px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.key-button:hover:not(.disabled) {
  transform: scale(1.05);
}

.key-button:active:not(.disabled) {
  transform: scale(0.95);
}

.special-key {
  background-color: #e0e0e0;
  font-weight: bold;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

4. 键盘布局配置

layouts/number.js示例：

export const generateLayout = (type) => {
  const layouts = {
    number: [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9'],
      ['.', '0', { value: 'delete', label: '⌫' }]
    ],
    letter: [
      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
      [
        { value: 'caps', label: '⇧' },
        'z', 'x', 'c', 'v', 'b', 'n', 'm',
        { value: 'delete', label: '⌫' }
      ]
    ],
    symbol: [
      ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
      ['-', '_', '+', '=', '{', '}', '[', ']', '|'],
      ['`', '~', '\\', ';', ':', "'", '"', ',', '.', '/'],
      ['<', '>', '?', ' ', { value: 'close', label: '关闭' }]
    ]
  };
  
  return layouts[type] || layouts.number;
};

三、集成与扩展

1. 全局注册组件

在main.js中全局注册组件，避免重复引入：

import { createApp } from 'vue';
import App from './App.vue';
import VirtualKeyboard from './components/VirtualKeyboard.vue';

const app = createApp(App);
app.component('VirtualKeyboard', VirtualKeyboard);
app.mount('#app');

2. 自定义键盘类型

通过扩展layouts目录，可以添加新的键盘类型（如密码键盘、电话键盘）：

// layouts/password.js
export const passwordLayout = [
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
  [{ value: 'clear', label: '清空' }, '0', { value: 'confirm', label: '确认' }]
];

3. 添加动画效果

在keyboard.css中添加键盘滑入/滑出动画：

.virtual-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  z-index: 100;
}

.virtual-keyboard.active {
  transform: translateY(0);
}