1 | <template>
|
2 | <div class="keyboard" @click="submit" ref="keyboard">
|
3 | <div class="line line1">
|
4 | <span class="char">
|
5 | <i>1</i>
|
6 | </span>
|
7 | <span class="char">
|
8 | <i>2</i>
|
9 | </span>
|
10 | <span class="char">
|
11 | <i>3</i>
|
12 | </span>
|
13 | <span class="char">
|
14 | <i>4</i>
|
15 | </span>
|
16 | <span class="char">
|
17 | <i>5</i>
|
18 | </span>
|
19 | <span class="char">
|
20 | <i>6</i>
|
21 | </span>
|
22 | <span class="char">
|
23 | <i>7</i>
|
24 | </span>
|
25 | <span class="char">
|
26 | <i>8</i>
|
27 | </span>
|
28 | <span class="char">
|
29 | <i>9</i>
|
30 | </span>
|
31 | <span class="char">
|
32 | <i>0</i>
|
33 | </span>
|
34 | </div>
|
35 | <div class="line line2">
|
36 | <span class="char">
|
37 | <i>q</i>
|
38 | </span>
|
39 | <span class="char">
|
40 | <i>w</i>
|
41 | </span>
|
42 | <span class="char">
|
43 | <i>e</i>
|
44 | </span>
|
45 | <span class="char">
|
46 | <i>r</i>
|
47 | </span>
|
48 | <span class="char">
|
49 | <i>t</i>
|
50 | </span>
|
51 | <span class="char">
|
52 | <i>y</i>
|
53 | </span>
|
54 | <span class="char">
|
55 | <i>u</i>
|
56 | </span>
|
57 | <span class="char">
|
58 | <i>i</i>
|
59 | </span>
|
60 | <span class="char">
|
61 | <i>o</i>
|
62 | </span>
|
63 | <span class="char">
|
64 | <i>p</i>
|
65 | </span>
|
66 | </div>
|
67 | <div class="line line3">
|
68 | <span class="char">
|
69 | <i>a</i>
|
70 | </span>
|
71 | <span class="char">
|
72 | <i>s</i>
|
73 | </span>
|
74 | <span class="char">
|
75 | <i>d</i>
|
76 | </span>
|
77 | <span class="char">
|
78 | <i>f</i>
|
79 | </span>
|
80 | <span class="char">
|
81 | <i>g</i>
|
82 | </span>
|
83 | <span class="char">
|
84 | <i>h</i>
|
85 | </span>
|
86 | <span class="char">
|
87 | <i>j</i>
|
88 | </span>
|
89 | <span class="char">
|
90 | <i>k</i>
|
91 | </span>
|
92 | <span class="char">
|
93 | <i>l</i>
|
94 | </span>
|
95 | </div>
|
96 | <div class="line line4">
|
97 | <span class="char icon">
|
98 | <i @click.stop="toggle" :class="{lock:lock}">⇧</i>
|
99 | </span>
|
100 | <span class="char">
|
101 | <i>z</i>
|
102 | </span>
|
103 | <span class="char">
|
104 | <i>x</i>
|
105 | </span>
|
106 | <span class="char">
|
107 | <i>c</i>
|
108 | </span>
|
109 | <span class="char">
|
110 | <i>v</i>
|
111 | </span>
|
112 | <span class="char">
|
113 | <i>b</i>
|
114 | </span>
|
115 | <span class="char">
|
116 | <i>n</i>
|
117 | </span>
|
118 | <span class="char">
|
119 | <i>m</i>
|
120 | </span>
|
121 | <span class="char icon">
|
122 | <i @click.stop="$emit('remove')">←</i>
|
123 | </span>
|
124 | </div>
|
125 | </div>
|
126 | </template>
|
127 | <script>
|
128 | export default {
|
129 | data() {
|
130 | return {
|
131 | lock: false
|
132 | };
|
133 | },
|
134 | watch: {
|
135 | lock(val) {
|
136 | const items = this.$refs.keyboard.querySelectorAll("i");
|
137 | [...items].forEach(item => {
|
138 | const value = item.textContent;
|
139 | item.textContent = val ? value.toUpperCase() : value.toLowerCase();
|
140 | });
|
141 | }
|
142 | },
|
143 | methods: {
|
144 | toggle() {
|
145 | this.lock = !this.lock;
|
146 | },
|
147 | submit(e) {
|
148 | const el = e.target;
|
149 | const isTag = el.nodeName.toUpperCase() == "I";
|
150 | if (isTag) {
|
151 | const value = el.textContent;
|
152 | const target = this.lock ? value.toUpperCase() : value;
|
153 | this.$emit("submit", target);
|
154 | }
|
155 | }
|
156 | }
|
157 | };
|
158 | </script>
|
159 |
|
160 | <style lang="scss" scoped>
|
161 | $blue: rgb(0, 140, 255);
|
162 | $c: rgb(224, 230, 235);
|
163 | .keyboard {
|
164 | padding: 10px;
|
165 | background: gray;
|
166 | margin: 0;
|
167 | font-size: 17px;
|
168 | background: white;
|
169 | .line {
|
170 | text-align: center;
|
171 | display: flex;
|
172 | justify-content: space-around;
|
173 | .char {
|
174 | background: white;
|
175 | display: flex;
|
176 | padding: 2px;
|
177 | &.icon {
|
178 | i {
|
179 | background: $c;
|
180 | }
|
181 | }
|
182 | i {
|
183 | font-style: normal;
|
184 | display: block;
|
185 | flex-grow: 1;
|
186 | margin: 2px;
|
187 | padding: 5px;
|
188 | border: 1px solid rgb(199, 199, 199);
|
189 | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
|
190 | border-radius: 4px;
|
191 | overflow: hidden;
|
192 | &:active {
|
193 | background: rgb(230, 229, 229);
|
194 | }
|
195 | &.lock {
|
196 | background: $blue;
|
197 | border-color: darken($color: $blue, $amount: 10%);
|
198 | color: white;
|
199 | }
|
200 | }
|
201 | }
|
202 | }
|
203 | .line1,
|
204 | .line2 {
|
205 | .char {
|
206 | width: 10%;
|
207 | }
|
208 | }
|
209 | .line3,
|
210 | .line4 {
|
211 | .char {
|
212 | width: 11.111111%;
|
213 | }
|
214 | }
|
215 | }
|
216 | </style>
|