60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div :class="keyboardClass"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import Keyboard from "simple-keyboard";
|
|
import "simple-keyboard/build/css/index.css";
|
|
|
|
export default {
|
|
name: "SimpleKeyboard",
|
|
props: {
|
|
keyboardClass: {
|
|
default: "simple-keyboard",
|
|
type: String
|
|
},
|
|
input: {
|
|
type: String
|
|
}
|
|
},
|
|
data: () => ({
|
|
keyboard: null
|
|
}),
|
|
mounted() {
|
|
this.keyboard = new Keyboard({
|
|
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
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
input(input) {
|
|
this.keyboard.setInput(input);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style> |