使用简单键盘支持多语言

Question

我是vuejs的新手，正在尝试实现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}",
],
},
};

Answer 1

我建议使用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 });
}

这就是如何使用这个库切换语言。如果它缺少你需要的语言，那么在简单的键盘布局中抛出PR，我发现作者对我添加的布局非常敏感和有帮助。

这里是一个小提琴(您可能需要单击小提琴中的刷新图标以显示按钮)，请注意simple-keyboard-layouts的一些较新版本似乎不能使用此功能，因此请务必检查package.json的版本号是否兼容或更新您的代码以匹配来自此库的最新和最大的代码。这些版本绝对可以用于此:

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