时间戳

首页 > 解决方案 > 使用简单键盘的多语言支持

javascript - 使用简单键盘的多语言支持

问题描述

我是 vue js 的新手，正在尝试实现https://virtual-keyboard.js.org/vuejs/

我已经实现了基本布局，但需要使用提到的不同语言布局来支持多语言https://github.com/simple-keyboard/simple-keyboard-layouts 。

但我不能在语言之间切换。我实际上找不到注入不同语言文件的方法。

<template>
  <div :class="keyboardClass"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";
// import SimpleKeyboardLayouts from "../lib/components/Layouts";

export default {
  name: "SimpleKeyboard",
  props: {
    keyboardClass: {
      default: "simple-keyboard",
      type: String,
    },
    input: {
      type: String,
    },
  },
  data: () => ({
    keyboard: null,
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);

      /**
       * If you want to handle the shift and caps lock buttons
       */
      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle,
      });
    },
    handleLanguages() {
      let currentLayoutlang = this.keyboard.options.layoutName;
      let languageToggle =
        currentLayoutlang === "english" ? "german" : "english";
      this.keyboard.setOptions({
        layoutName: languageToggle,
      });
    },
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

我拥有的示例布局语言文件就像

import { LayoutItem } from "../interfaces";

/**
 * Layout: German
 */
export default <LayoutItem>{
  layout: {
    default: [
      "^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
      "{tab} q w e r t z u i o p \u00FC +",
      "{lock} a s d f g h j k l \u00F6 \u00E4 # {enter}",
      "{shift} < y x c v b n m , . - {shift}",
      ".com @ {space}",
    ],
    shift: [
      '\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
      "{tab} Q W E R T Z U I O P \u00DC *",
      "{lock} A S D F G H J K L \u00D6 \u00C4 ' {enter}",
      "{shift} > Y X C V B N M ; : _ {shift}",
      ".com @ {space}",
    ],
  },
};

标签： javascriptvue.jsreact-simple-keyboard

解决方案

我建议使用simple-keyboard-layouts, 然后method在您要更改语言的地方执行此操作：

handleLanguages() {
  let languageToggle =
    this.keyboard.options.layoutName === "english" ? "german" : "english";
  const layout = new this.SimpleKeyboardLayouts().get(languageToggle);
  this.keyboard.setOptions({ layout });
}

这就是您可以使用此库切换语言的方式。如果它缺少您需要的语言，请在simple-keyboard-layouts中提出 PR ，我发现作者对我添加的布局非常敏感且乐于助人。

这是一个小提琴（您可能需要单击小提琴中的刷新图标才能显示按钮），请注意某些较新版本的simple-keyboard-layouts似乎不适用于此功能，因此请务必检查package.json版本号兼容或更新您的代码以匹配该库中最新最好的内容。这些是绝对适用于此的版本：

"simple-keyboard": "^2.32.108",
"simple-keyboard-layouts": "^1.15.165",

推荐阅读