Vue集成Simple Keyboard虚拟键盘实现多语言切换问题

第一步：准备布局文件 #

• 将你现有的德语布局代码保存为src/keyboard-layouts/german.js
• 补充英文默认布局保存为同路径下的english.js（也可以直接引入官方布局包的预置布局）

第二步：修改组件代码 #

1. 引入布局依赖 #

在组件script头部引入布局文件：

import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";
// 引入多语言布局
import germanLayout from "../keyboard-layouts/german.js";
import englishLayout from "../keyboard-layouts/english.js";

2. 初始化时注入全量布局 #

修改mounted钩子中的键盘初始化配置，添加layout参数注入所有语言的布局：

mounted() {
  this.keyboard = new Keyboard(this.keyboardClass, {
    onChange: this.onChange,
    onKeyPress: this.onKeyPress,
    // 注入所有语言的常规/大写布局
    layout: {
      english: englishLayout.layout.default,
      englishShift: englishLayout.layout.shift,
      german: germanLayout.layout.default,
      germanShift: germanLayout.layout.shift
    },
    // 默认初始布局为英文常规
    layoutName: "english"
  });
}

3. 调整大小写切换逻辑 #

修改handleShift方法，适配带语言标识的布局名称：

handleShift() {
  const currentLayout = this.keyboard.options.layoutName;
  if (currentLayout.startsWith("english")) {
    const targetLayout = currentLayout === "english" ? "englishShift" : "english";
    this.keyboard.setOptions({ layoutName: targetLayout });
  } else if (currentLayout.startsWith("german")) {
    const targetLayout = currentLayout === "german" ? "germanShift" : "german";
    this.keyboard.setOptions({ layoutName: targetLayout });
  }
}

4. 调整语言切换逻辑 #

修改handleLanguages方法，切换语言时保留当前大小写状态：

handleLanguages() {
  const currentLayout = this.keyboard.options.layoutName;
  let targetLayout;
  if (currentLayout.startsWith("english")) {
    targetLayout = currentLayout === "english" ? "german" : "germanShift";
  } else {
    targetLayout = currentLayout === "german" ? "english" : "englishShift";
  }
  this.keyboard.setOptions({ layoutName: targetLayout });
}

额外优化 #

如果不需要自己维护布局文件，可以直接安装官方布局包，直接引入对应语言的预置配置即可，无需手动编写布局js。

内容的提问来源于stack exchange，提问作者V5NEXT