简单易用的Vue虚拟键盘插件：simple-keyboard指南
最编程
2024-02-01 10:11:34
...
<template>
<div class="input-keyboard">
<el-input
v-model="inputValue"
:class="inputClass"
:suffix-icon="suffixIcon"
:type="type"
:rows="rows"
:show-word-limit="showWordLimit"
:disabled="disabled"
:maxlength="maxlength"
:clearable="clearable"
:size="size"
:placeholder="placeholder"
@focus="focusInput($event)"
@input="inputFun"
>
<template v-if="appendPort" slot="append">[1-65535]</template></el-input
><SimpleKeyboard
:ref="keyboardClass"
:keyboardClass="keyboardClass"
@onChange="onChange"
@onKeyPress="onKeyPress"
:input="inputValue"
:maxLength="maxlength"
/>
</div>
</template>
<script>
import SimpleKeyboard from './simpleKeyboard.vue';
export default {
name: 'keyboard-input',
components: {
SimpleKeyboard,
},
props: {
keyboardClass: String,
value: {
default: '',
},
inputClass: String,
type: {
type: String,
default: 'text',
},
rows: Number,
showWordLimit: {
default: false,
},
disabled: {
type: Boolean,
default: false,
},
maxlength: Number,
clearable: Boolean,
size: String,
placeholder: String,
appendPort: {
type: Boolean,
default: false,
},
autocomplete: {
default: '',
},
suffixIcon: {
default: '',
},
},
data() {
return {
showKeyboard: false,
input: null,
};
},
computed: {
inputValue: {
get() {
return this.value;
},
set(value) {
this.$emit('inputChange', value);
},
},
},
methods: {
inputChange() {
this.$emit('inputChange');
},
inputFun() {
this.$emit('input');
},
focusInput(e) {
// 关闭所有keyboard
let arr = document.querySelectorAll('.hg-theme-default');
arr.forEach((ele) => {
ele.style.visibility = 'hidden';
});
// 打开当前输入框的keyboard
let currentKeyborad = this.$refs[this.keyboardClass];
currentKeyborad.$el.style.visibility = 'visible';
this.$emit('focus');
},
onChange(input) {
this.inputValue = input;
},
onKeyPress(button) {
// console.log('onKeyPress', button);
},
},
};
</script>
<style lang="less" scoped>;
@deep: ~'>>>';
.input-keyboard {
@{deep}.hg-theme-default {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%);
visibility: hidden;
margin-top: 20px;
z-index: 2000;
// 中文文字选择框
.hg-candidate-box {
position: static;
transform: translateY(0);
}
// 键盘
.hg-rows {
}
}
&.citc-search-input {
.el-input {
width: 100% !important;
}
}
}
</style>