123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <template>
- <div>
- <ul class="keyboard">
- <li v-for="key in keyList" 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>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- keyList: [],
- normalKeyList: [],
- shiftedKeyList: [],
- capsedKeyList: [],
- hasShifted: false,
- hasCapsed: false,
- keyboardtext: this.keyboardText
- }
- },
- props: ['keyboardText'],
- watch: {
- keyboardText(val) {
- this.keyboardtext = val;//新增result的watch,监听变更并同步到myResult上
- },
- keyboardtext(val){
- //xxcanghai 小小沧海 博客园
- this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
- }
- },
- methods: {
- clickKey(key) {
- switch(key) {
- case "Delete":
- let kbt = this.keyboardText;
- this.keyboardText = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
- break;
- case "Tab":
- this.keyboardText += "\t";
- break;
- case "Enter":
- this.keyboardText += "\n";
- break;
- case "Space":
- this.keyboardText += " ";
- 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.keyboardText += key.toString();
- break;
- }
- }
- },
- mounted() {
- 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 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>
|