vue3 引用虚拟键盘simple-keyboard-编程知识

vue3 引用虚拟键盘simple-keyboard

simple-keyboard官网地址：https://virtual-keyboard.js.org

目前实现效果图是（实现数字、大小写字母键盘）：
在这里插入图片描述

1.需要先安装simple-keyboard

npm install simple-keyboard --save

2.封装sinpleKeyboard 组件

<!-- keyboard-box.vue-->
<template><div class="keyboard-box"><div :class="keyboardClass"></div></div>
</template><script setup name= "SimpleKeyboard">
//引用
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";
import { onMounted, ref, watch } from "vue";
//自定义键盘图片
import delIcon from "../assets/del.png";
import lockIcon from "../assets/lock.png";
import bigIcon from "../assets/big.png";const emit = defineEmits(["onChange", "onKeyPress"]);
const visible = ref(true);
const props = defineProps({keyboardClass: { type: String, default: "simple-keyboard" },input: String,layout: {type: Object,default: () => {return {default: ["1 2 3 {bksp}","4 5 6 .","7 8 9 @","{close} 0 {abc} {enter}",],abc: ["q w e r t y u i o p","a s d f g h j k l","{lock} z x c v b n m {bksp}","{123} . 0 @ {close} {enter}",],lock: ["Q W E R T Y U I O P","A S D F G H J K L","{big} Z X C V B N M {bksp}","{123} . 0 @ {close} {enter}",],// default: [//     "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",//     "{tab} q w e r t y u i o p [ ] \\",//     "{lock} a s d f g h j k l ; ' {enter}",//     "{shift} z x c v b n m , . / {shift}",//     "@ {space}",//   ],//   shift: [//     "~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}",//     "{tab} Q W E R T Y U I O P { } |",//     '{lock} A S D F G H J K L : " {enter}',//     "{shift} Z X C V B N M &lt; &gt; ? {shift}",//     "@ {space}",//   ],};},},
});
let keyboard = ref(null);
onMounted(() => {keyboard.value = new Keyboard(props.keyboardClass, {onChange: onChange,//这里一定要注意驼峰命名（否则会不生效）onKeyPress: onKeyPress,});keyboard.value.setOptions({layoutName: "default",layout: props.layout,display: {// 中文语言包"{enter}": "完成","{123}": "123","{tab}": "tab","{shift}": "shift","{space}": " ","{bksp}": `<img src=${delIcon} style='' width='30'>`,"{big}": `<img src=${lockIcon} style='' width='30'>`,"{lock}": `<img src=${bigIcon} style='' width='30'>`,"{close}": "关闭","{abc}": "abc",},});
});watch(()=>props.input, (newValue, oldValue) => {keyboard.value.setInput(newValue);
});const onChange = (input) => {emit("onChange", input);
};
const onKeyPress = (button) => {emit("onKeyPress", button);if (button === "{123}" || button === "{abc}") {handleShift();}if (button === "{lock}" || button === "{big}") hadleLock();// return;if (button === "{big}" ||button === "{abc}" ||button === "{lock}" ||button === "{123}") {console.log(keyboard.value.options.layoutName,"keyboard.value.options.layoutName");}
};const handleShift = () => {let currentLayout = keyboard.value.options.layoutName;let shiftToggle = currentLayout === "default" ? "abc" : "default";keyboard.value.setOptions({layoutName: shiftToggle,});
};
const hadleLock = () => {let currentLayout = keyboard.value.options.layoutName;let shiftToggle = currentLayout === "abc" ? "lock" : "abc";keyboard.value.setOptions({layoutName: shiftToggle,});
};
</script><style  scoped>
.keyboard-box{width: 40%;margin: auto;
}
.simple-keyboard {background: none !important;font-size: 20px;
}::v-deep(.hg-button:nth-of-type(4)),
::v-deep(.hg-button-close),
::v-deep(.hg-button-abc) {box-sizing: border-box;width: 20px;max-width: none !important;
}
.hg-button {/* width: calc(100% / 4); */
}
</style>

3.引用组件

<template>
<el-inputsize="large"class="text"v-model="mobile"clearable@focus="focusMobile"@blur="blurMobile"></el-input><!-- 键盘 --><div class="el-drawer keyboard"><number-keyboardv-if="isKeyboard"@onChange="onChange"@onKeyPress="onkeyPress":input="model"></number-keyboard></div>
</template>
<script setup>
import numberKeyboard from "../components/numberKeyboard.vue";let mobile=ref('')
let isKeyboard=ref(false)
// 键盘按键的值const onChange = (e) => {console.log(state.currentProp, "23423423");model.value= e;};// 键盘按键为完成和关闭时隐藏键盘const onkeyPress = (button) => {if (button === "{enter}" || button === "{close}") {isKeyboard.value = false;model.value = "";}};const focusMobile = (e) => {nextTick(() => {isKeyboard.value = true;model.value  =  model.value });console.log(e, "23424聚焦点");};const blurMobile = (e) => {console.log(e, "失去焦点");};
</script>