<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:this.keyboardtext
}
},
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;
}
console.log(this.keyvalue)
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>