在详设中,遇到了需要实现软键盘的地方,要实现的效果图如下
实现的代码如下:
<template>
<div class="myIndexWrap">
<div class="keyboardWrap">
<h3>软键盘</h3>
<input class="myInput" type="text" v-model="keyboards" />
<!-- Keyboard组件 -->
<Keyboard @updatekey="getKeyboardVal" class="keyboardWrap"></Keyboard>
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import Keyboard from "@/components/Keyboard.vue";
export default {
components: {
Keyboard
},
data() {
return {
keyboards: "",
};
},
mounted() {},
methods: {
//软键盘功能
getKeyboardVal(val) {
this.keyboards = val;
},
}
};
</script>
<style lang='scss' scoped>
.myIndexWrap {
width: 1200px;
min-height: 800px;
height: auto;
border: 1px solid #000;
display: flex;
flex-flow: column;
.keyboardWrap {
margin-left: 100px;
margin-top: 50px;
}
.myInput {
width: 300px;
height: 30px;
// 去除input框的阴影
outline-color: invert;
outline-style: none;
outline-width: 0px;
border: 1px solid #999;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
// 软键盘图标
background: url("../../assets/softBoard.png") no-repeat;
background-size: 30px 30px;
background-position: top right;
}
}
</style>
Keyboard.vue
<template>
<ul class="keyboard">
<li
v-for="(key, index) in keyList"
:key="index"
track-by="$index"
:class="{
delete: key === 'Delete',
tab: key === 'Tab',
capslock: key === 'Caps',
enter: key === 'Enter',
shift: key === 'Shift',
space: key === 'Space',
shifted: key === 'Shift' && hasShifted,
capsed: key === 'Caps' && hasCapsed
}"
v-text="key"
@click="clickKey(key)"
></li>
</ul>
</template>
<script>
export default {
data() {
return {
keyList: [],
normalKeyList: [],
shiftedKeyList: [],
capsedKeyList: [],
hasShifted: false,
hasCapsed: false,
keyvalue: ""
};
},
created() {
this.ready();
},
methods: {
clickKey(key) {
switch (key) {
case "Delete":
let kbt = this.keyvalue;
this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
break;
case "Tab":
this.keyvalue += "\t";
break;
case "Enter":
this.keyvalue += "\n";
break;
case "Space":
this.keyvalue += " ";
break;
case "Caps":
this.hasCapsed = !this.hasCapsed;
this.keyList = this.hasCapsed
? this.capsedKeyList
: this.normalKeyList;
break;
case "Shift":
this.hasShifted = !this.hasShifted;
this.keyList = this.hasShifted
? this.shiftedKeyList
: this.normalKeyList;
break;
default:
this.keyvalue += key;
break;
}
this.$emit("updatekey", this.keyvalue);
},
ready() {
let normalKeyList = [
"`",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0",
"-",
"=",
"Delete",
"Tab",
"q",
"w",
"e",
"r",
"t",
"y",
"u",
"i",
"o",
"p",
"[",
"]",
"\\",
"Caps",
"a",
"s",
"d",
"f",
"g",
"h",
"j",
"k",
"l",
";",
"'",
"Enter",
"Shift",
"z",
"x",
"c",
"v",
"b",
"n",
"m",
",",
".",
"/",
"Shift",
"Space"
],
shiftedKeyList = [
"~",
"!",
"@",
"#",
"$",
"%",
"^",
"&",
"*",
"(",
")",
"_",
"+",
"Delete",
"Tab",
"Q",
"W",
"E",
"R",
"T",
"Y",
"U",
"I",
"O",
"P",
"{",
"}",
"|",
"Caps",
"A",
"S",
"D",
"F",
"G",
"H",
"J",
"K",
"L",
":",
'"',
"Enter",
"Shift",
"Z",
"X",
"C",
"V",
"B",
"N",
"M",
"<",
">",
"?",
"Shift",
"Space"
],
capsedKeyList = [
"`",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0",
"-",
"=",
"Delete",
"Tab",
"Q",
"W",
"E",
"R",
"T",
"Y",
"U",
"I",
"O",
"P",
"[",
"]",
"\\",
"Caps",
"A",
"S",
"D",
"F",
"G",
"H",
"J",
"K",
"L",
";",
"'",
"Enter",
"Shift",
"Z",
"X",
"C",
"V",
"B",
"N",
"M",
",",
".",
"/",
"Shift",
"Space"
];
this.keyList = this.normalKeyList = normalKeyList;
this.shiftedKeyList = shiftedKeyList;
this.capsedKeyList = capsedKeyList;
}
}
};
</script>
<style lang="scss" scoped>
.keyboard {
width: 688px;
margin: 0;
padding: 0;
list-style: none;
user-select: none;
li {
float: left;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 5px;
&:hover {
position: relative;
border-color: gray;
cursor: pointer;
}
&:active {
top: 1px;
left: 1px;
}
}
.tab,
.delete {
width: 70px;
}
.capslock {
width: 80px;
}
.enter {
width: 77px;
}
.shift {
width: 102px;
}
.space {
clear: left;
width: 681px;
}
.shifted {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
.capsed {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
}
</style>
以上是所有代码,通过$emit将softBoard点击拿到的数据传递给父组件