run the following command
restaurentPos>npm install simple-keyboard --save
create a file SimpleKeyboard.vue in the location:resources\js\components\block\
<template> <div class="keyboard"> <div :class="keyboardClass"></div> </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 }, inputName: { type: String } }, data: () => ({ keyboard: null }), mounted() { this.keyboard = new Keyboard(this.keyboardClass, { onChange: this.onChange, onKeyPress: this.onKeyPress, inputName: this.inputName }); }, 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: { inputName(inputName) { console.log("SimpleKeyboard: inputName updated", inputName); this.keyboard.setOptions({ inputName }); }, input(input) { this.keyboard.setInput(input); } } }; </script> <style scoped> .simple-keyboard { margin: auto; } </style>
create a input file TextInputKeyboardBlock.vue in the location:resources\js\components\block\
<template> <input type="text" :id="inputName" :value="inputValue" :placeholder="'enter '+ inputName" @focus="onInputFocus" @input="onInputChange" /> </template> <script> export default { name: "TextInputKeyboardBlock", props: { inputs: { type: Object }, inputName: { type: String } }, methods: { onInputChange(input) { this.$emit("onInputChange", input); }, onInputFocus(input) { this.$emit("onInputFocus", input); } }, computed: { inputValue: function () { return this.inputs[this.inputName]; } } }; </script> <style scoped> </style>
create a password file PassInputKeyboardBlock.vue in the location:resources\js\components\block\
<template> <input type="password" :id="inputName" :value="inputValue" :placeholder="'enter '+ inputName" @focus="onInputFocus" @input="onInputChange" /> </template> <script> export default { name: "PassInputKeyboardBlock", props: { inputs: { type: Object }, inputName: { type: String } }, methods: { onInputChange(input) { this.$emit("onInputChange", input); }, onInputFocus(input) { this.$emit("onInputFocus", input); } }, computed: { inputValue: function () { return this.inputs[this.inputName]; } } }; </script> <style scoped> </style>
create a keyboard file PublicKayboardBlock.vue in the location:resources\js\components\block\
<template> <div class="keyboard"> <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="inputs[inputName]" :inputName="inputName" /> </div> </template> <script> import SimpleKeyboard from "../block/SimpleKeyboard"; import "../../board.css"; export default { data: () => ({ input: "" }), props:['propsWriteOnEmailInput','propsWriteOnPassInput'], components:{ SimpleKeyboard }, mounted(){ }, methods: { onChange(input) { //alert("i-"+input); /*if(this.propsWriteOnEmailInput==true){ this.$emit('updatePosEmail',input); }else if(this.propsWriteOnPassInput==true){ this.$emit('updatePosPass',input); }*/ }, onKeyPress(button) { //alert("b-"+button); //console.log("button", button); /*if(this.propsWriteOnEmailInput==true){ this.$emit('updatePosEmail',button); }else if(this.propsWriteOnPassInput==true){ this.$emit('updatePosPass',button); }*/ }, } }; </script> <style> </style>
Create a file board.css in the location:resources\js\
input { width: 100%; height: 100px; padding: 20px; font-size: 20px; border: none; box-sizing: border-box; } .simple-keyboard { max-width: 850px; }
Total : 18983
Today :12
Today Visit Country :