Vue使用虚拟键盘+中英文切换
1.安装依赖
npm install simple-keyboard --save
npm install simple-keyboard-layouts --save2.虚拟键盘组件
simpleKeyboard.vue
<template><div :class="keyboardClass"></div>
</template><script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法export default {name: 'SimpleKeyboard',props: {keyboardClass: {default: 'simple-keyboard',type: String,},input: {default: '',},maxLength: { default: '' },},data: () => ({keyboard: null,displayDefault: {'{bksp}': 'backspace','{lock}': 'caps','{enter}': '> enter','{tab}': 'tab','{shift}': 'shift','{change}': '中文','{space}': ' ','{clear}': '清空','{close}': '关闭',},}),mounted() {this.keyboard = new Keyboard(this.keyboardClass, {onChange: this.onChange,onKeyPress: this.onKeyPress,layoutCandidates: layout.layoutCandidates,layout: {// 默认布局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 , . / {clear}','{change} {space} {close}',],// shift布局shift: ['~ ! @ # $ % ^ & * ( ) _ + {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 < > ? {clear}','{change} {space} {close}',],},// 按钮展示文字display: this.displayDefault,// 按钮样式buttonTheme: [{class: 'hg-red close',buttons: '{close}',},{class: 'change',buttons: '{change}',},],// 输入限制长度maxLength: this.maxLength,})},methods: {onChange(input) {this.keyboard.setInput(input)this.$emit('onChange', input)},// 点击键盘onKeyPress(button, $event) {console.log(button)// 点击关闭if (button === '{close}') {// let keyboard = $event.path[3]// 子组件调用父组件的关闭按钮方法this.$parent.closekeyboard()// keyboard.style.visibility = 'hidden'return false} else if (button === '{change}') {// 切换中英文输入法if (this.keyboard.options.layoutCandidates !== null) {this.$set(this.displayDefault, '{change}', '英文')// 切换至英文this.keyboard.setOptions({layoutCandidates: null,display: this.displayDefault,})} else {// 切换至中文this.$set(this.displayDefault, '{change}', '中文')this.keyboard.setOptions({layoutCandidates: layout.layoutCandidates,display: this.displayDefault,})}} else if (button === '{clear}') {this.keyboard.clearInput()} else {let value =$event.target.offsetParent.parentElement.children[0].children[0].value// 输入框有默认值时，覆写if (value) {this.keyboard.setInput(value)}this.$emit('onKeyPress', button)}if (button === '{shift}' || button === '{lock}') this.handleShift()},// 切换shift/默认布局handleShift() {let currentLayout = this.keyboard.options.layoutNamelet shiftToggle = currentLayout === 'default' ? 'shift' : 'default'this.keyboard.setOptions({layoutName: shiftToggle,})},},watch: {input(input) {this.keyboard.setInput(input)},},
}
</script><style lang="less">
@deep: ~'>>>';
.hg-theme-default {width: 70%;.hg-button {&.hg-red {background: #db3e5d;color: white;&.close {max-width: 200px;}}&.change {max-width: 200px;}}
}
</style>3.使用虚拟键盘
<el-input v-model="toolParameter.latheNumber" @focus="onInputFocus('latheNumber')">
</el-input><el-input v-model="toolParameter.tid" @focus="onInputFocus('tid')" placeholder="">
</el-input><div v-show="showKeyboard"><SimpleKeyboard ref="SimpleKeyboard" @onChange="onChangeKeyboard" />
</div>
import SimpleKeyboard from '../../components/simpleKeyboard.vue'
export default {name: 'Home',components: {SimpleKeyboard,},data() {return {showKeyboard: false, //键盘默认隐藏changeIpt:'',//选择了哪个输入框}},methods:{// inpuit获取焦点显示虚拟键盘onInputFocus(res) {this.showKeyboard = truethis.changeIpt = res// 父组件调用子组件的方法this.$refs.SimpleKeyboard.onKeyPress('{clear}')},// 给输入框赋值onChangeKeyboard(input) {if (this.changeIpt == 'latheNumber') {this.toolParameter.latheNumber = input} else if (this.changeIpt == 'tid') {this.toolParameter.tid = input}},// 点击关闭隐藏键盘closekeyboard() {this.showKeyboard = false},}
}// 键盘样式
.simple-keyboard {position: absolute;bottom: 0;left: 5%;width: 90%;color: #000;z-index: 999999999;
}
Vue使用虚拟键盘+中英文切换
1.安装依赖
npm install simple-keyboard --save
npm install simple-keyboard-layouts --save2.虚拟键盘组件
simpleKeyboard.vue
<template><div :class="keyboardClass"></div>
</template><script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法export default {name: 'SimpleKeyboard',props: {keyboardClass: {default: 'simple-keyboard',type: String,},input: {default: '',},maxLength: { default: '' },},data: () => ({keyboard: null,displayDefault: {'{bksp}': 'backspace','{lock}': 'caps','{enter}': '> enter','{tab}': 'tab','{shift}': 'shift','{change}': '中文','{space}': ' ','{clear}': '清空','{close}': '关闭',},}),mounted() {this.keyboard = new Keyboard(this.keyboardClass, {onChange: this.onChange,onKeyPress: this.onKeyPress,layoutCandidates: layout.layoutCandidates,layout: {// 默认布局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 , . / {clear}','{change} {space} {close}',],// shift布局shift: ['~ ! @ # $ % ^ & * ( ) _ + {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 < > ? {clear}','{change} {space} {close}',],},// 按钮展示文字display: this.displayDefault,// 按钮样式buttonTheme: [{class: 'hg-red close',buttons: '{close}',},{class: 'change',buttons: '{change}',},],// 输入限制长度maxLength: this.maxLength,})},methods: {onChange(input) {this.keyboard.setInput(input)this.$emit('onChange', input)},// 点击键盘onKeyPress(button, $event) {console.log(button)// 点击关闭if (button === '{close}') {// let keyboard = $event.path[3]// 子组件调用父组件的关闭按钮方法this.$parent.closekeyboard()// keyboard.style.visibility = 'hidden'return false} else if (button === '{change}') {// 切换中英文输入法if (this.keyboard.options.layoutCandidates !== null) {this.$set(this.displayDefault, '{change}', '英文')// 切换至英文this.keyboard.setOptions({layoutCandidates: null,display: this.displayDefault,})} else {// 切换至中文this.$set(this.displayDefault, '{change}', '中文')this.keyboard.setOptions({layoutCandidates: layout.layoutCandidates,display: this.displayDefault,})}} else if (button === '{clear}') {this.keyboard.clearInput()} else {let value =$event.target.offsetParent.parentElement.children[0].children[0].value// 输入框有默认值时，覆写if (value) {this.keyboard.setInput(value)}this.$emit('onKeyPress', button)}if (button === '{shift}' || button === '{lock}') this.handleShift()},// 切换shift/默认布局handleShift() {let currentLayout = this.keyboard.options.layoutNamelet shiftToggle = currentLayout === 'default' ? 'shift' : 'default'this.keyboard.setOptions({layoutName: shiftToggle,})},},watch: {input(input) {this.keyboard.setInput(input)},},
}
</script><style lang="less">
@deep: ~'>>>';
.hg-theme-default {width: 70%;.hg-button {&.hg-red {background: #db3e5d;color: white;&.close {max-width: 200px;}}&.change {max-width: 200px;}}
}
</style>3.使用虚拟键盘
<el-input v-model="toolParameter.latheNumber" @focus="onInputFocus('latheNumber')">
</el-input><el-input v-model="toolParameter.tid" @focus="onInputFocus('tid')" placeholder="">
</el-input><div v-show="showKeyboard"><SimpleKeyboard ref="SimpleKeyboard" @onChange="onChangeKeyboard" />
</div>
import SimpleKeyboard from '../../components/simpleKeyboard.vue'
export default {name: 'Home',components: {SimpleKeyboard,},data() {return {showKeyboard: false, //键盘默认隐藏changeIpt:'',//选择了哪个输入框}},methods:{// inpuit获取焦点显示虚拟键盘onInputFocus(res) {this.showKeyboard = truethis.changeIpt = res// 父组件调用子组件的方法this.$refs.SimpleKeyboard.onKeyPress('{clear}')},// 给输入框赋值onChangeKeyboard(input) {if (this.changeIpt == 'latheNumber') {this.toolParameter.latheNumber = input} else if (this.changeIpt == 'tid') {this.toolParameter.tid = input}},// 点击关闭隐藏键盘closekeyboard() {this.showKeyboard = false},}
}// 键盘样式
.simple-keyboard {position: absolute;bottom: 0;left: 5%;width: 90%;color: #000;z-index: 999999999;
}