sykj 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/keyboard/src/Keyboardcon.vue +982 -941
|
@@ -1,146 +1,172 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
@click="makeFocus"
|
|
4
|
-
class="keyboardcon defaultCss"
|
|
5
|
-
:class="[!keyStore.keyboardcon ? 'show' : '', toUpKeyCase ? 'upKeyCase' : '']"
|
|
6
|
-
@contextmenu.prevent="makeFocus"
|
|
7
|
-
>
|
|
8
|
-
<!-- 中文拼音列表 -->
|
|
9
|
-
<div class="chinese">
|
|
10
|
-
<div
|
|
11
|
-
v-if="keyStore.isChinese === true && cn_input?.length"
|
|
12
|
-
class="pinyin"
|
|
13
|
-
@touchmove.stop.prevent
|
|
14
|
-
>
|
|
15
|
-
<div>
|
|
16
|
-
<span>{{ cn_input }}</span>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="wenzi" v-if="cn_list_str.length >= 1">
|
|
20
|
-
<div
|
|
21
|
-
class="wenzi_box"
|
|
22
|
-
:class="showMore ? 'wenzi_box_more' : ''"
|
|
23
|
-
:style="huanhang ? `flex-wrap: wrap;` : ''"
|
|
24
|
-
>
|
|
25
|
-
<span
|
|
26
|
-
@click="chineseCli(item)"
|
|
27
|
-
v-for="(item, index) in cn_list_str"
|
|
28
|
-
:key="index"
|
|
29
|
-
>{{ item }}</span
|
|
30
|
-
>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="moreText" @click="moreTextCli">
|
|
33
|
-
<el-icon :style="`transform: rotateZ(${showMore ? 180 : 0}deg)`">
|
|
34
|
-
<ArrowDownBold />
|
|
35
|
-
</el-icon>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
<!-- 纯数字 -->
|
|
40
2
|
<div
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
3
|
+
@click="makeFocus"
|
|
4
|
+
class="keyboardcon defaultCss"
|
|
5
|
+
:class="[
|
|
6
|
+
keyStore.keyboardcon ? 'show' : '',
|
|
7
|
+
toUpKeyCase ? 'upKeyCase' : '',
|
|
8
|
+
]"
|
|
9
|
+
@contextmenu.prevent="makeFocus"
|
|
44
10
|
>
|
|
45
|
-
|
|
11
|
+
<!-- 中文拼音列表 -->
|
|
12
|
+
<div class="chinese">
|
|
13
|
+
<div
|
|
14
|
+
v-if="keyStore.isChinese === true && cn_input?.length"
|
|
15
|
+
class="pinyin"
|
|
16
|
+
@touchmove.stop.prevent
|
|
17
|
+
>
|
|
18
|
+
<div>
|
|
19
|
+
<span>{{ cn_input }}</span>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="wenzi" v-if="cn_list_str.length >= 1">
|
|
23
|
+
<div
|
|
24
|
+
class="wenzi_box"
|
|
25
|
+
:class="showMore ? 'wenzi_box_more' : ''"
|
|
26
|
+
:style="huanhang ? `flex-wrap: wrap;` : ''"
|
|
27
|
+
>
|
|
28
|
+
<span
|
|
29
|
+
@click="chineseCli(item)"
|
|
30
|
+
v-for="(item, index) in cn_list_str"
|
|
31
|
+
:key="index"
|
|
32
|
+
>{{ item }}</span
|
|
33
|
+
>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="moreText" @click="moreTextCli">
|
|
36
|
+
<el-icon
|
|
37
|
+
:style="`transform: rotateZ(${showMore ? 180 : 0}deg)`"
|
|
38
|
+
>
|
|
39
|
+
<ArrowDownBold />
|
|
40
|
+
</el-icon>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<!-- 纯数字 -->
|
|
46
45
|
<div
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
class="number_list"
|
|
47
|
+
@touchmove.stop.prevent
|
|
48
|
+
v-show="keyStore.inputType == 'number'"
|
|
50
49
|
>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
<div class="key_item" v-for="(item, index) in lists" :key="item">
|
|
51
|
+
<div
|
|
52
|
+
class="key"
|
|
53
|
+
@click.stop="choosekey(item, index)"
|
|
54
|
+
v-if="!Array.isArray(item) && index < 11"
|
|
55
|
+
>
|
|
56
|
+
<span>{{ item }}</span>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="keys" v-else-if="index < 11">
|
|
59
|
+
<span @click.stop="choosekey(item[0], index)">{{
|
|
60
|
+
item[0]
|
|
61
|
+
}}</span>
|
|
62
|
+
<span @click.stop="choosekey(item[1], index)">{{
|
|
63
|
+
item[1]
|
|
64
|
+
}}</span>
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="key del"
|
|
68
|
+
@click.stop="choosekey(item, index)"
|
|
69
|
+
v-if="index == '11'"
|
|
70
|
+
>
|
|
71
|
+
<img src="./static/key/del.svg" alt="" />
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
59
74
|
</div>
|
|
60
|
-
|
|
61
|
-
</div>
|
|
62
|
-
<!-- 26键 -->
|
|
63
|
-
<div
|
|
64
|
-
class="text_list"
|
|
65
|
-
:class="[isSymbol ? 'isSymbol' : '']"
|
|
66
|
-
@touchmove.stop.prevent
|
|
67
|
-
v-show="keyStore.inputType != 'number'"
|
|
68
|
-
ref="pressArea"
|
|
69
|
-
>
|
|
70
|
-
<div class="key_item_row" v-for="(item, index) in lists" :key="index">
|
|
75
|
+
<!-- 26键 -->
|
|
71
76
|
<div
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
@click.stop="choosekey(item1, index1)"
|
|
78
|
-
:key="item1"
|
|
77
|
+
class="text_list"
|
|
78
|
+
:class="[isSymbol ? 'isSymbol' : '']"
|
|
79
|
+
@touchmove.stop.prevent
|
|
80
|
+
v-show="keyStore.inputType != 'number'"
|
|
81
|
+
ref="pressArea"
|
|
79
82
|
>
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
83
|
+
<div
|
|
84
|
+
class="key_item_row"
|
|
85
|
+
v-for="(item, index) in lists"
|
|
86
|
+
:key="index"
|
|
87
|
+
>
|
|
88
|
+
<div
|
|
89
|
+
class="key_item_column"
|
|
90
|
+
@touchstart="startPress"
|
|
91
|
+
@touchend="endPress"
|
|
92
|
+
@touchcancel="cancelPress"
|
|
93
|
+
v-for="(item1, index1) in item"
|
|
94
|
+
@click.stop="choosekey(item1, index1)"
|
|
95
|
+
:key="item1"
|
|
96
|
+
>
|
|
97
|
+
<div class="key" v-if="item1.length == 1">
|
|
98
|
+
<span>{{ item1 }}</span>
|
|
99
|
+
</div>
|
|
100
|
+
<div
|
|
101
|
+
class="key"
|
|
102
|
+
:class="toUpKeyCase ? 'toUpKeyCase' : ''"
|
|
103
|
+
v-else
|
|
104
|
+
>
|
|
105
|
+
<!-- {{ item1 }} -->
|
|
106
|
+
<img
|
|
107
|
+
v-if="item1 == 'del'"
|
|
108
|
+
:class="item1"
|
|
109
|
+
src="./static/key/del.svg"
|
|
110
|
+
alt=""
|
|
111
|
+
/>
|
|
112
|
+
<img
|
|
113
|
+
v-else-if="item1 == 'shift'"
|
|
114
|
+
:class="item1"
|
|
115
|
+
src="./static/key/shift.svg"
|
|
116
|
+
alt=""
|
|
117
|
+
/>
|
|
118
|
+
<img
|
|
119
|
+
v-else-if="item1 == 'space'"
|
|
120
|
+
:class="item1"
|
|
121
|
+
src="./static/key/space.svg"
|
|
122
|
+
alt=""
|
|
123
|
+
/>
|
|
124
|
+
<img
|
|
125
|
+
v-else-if="item1 == 'enter'"
|
|
126
|
+
:class="item1"
|
|
127
|
+
src="./static/key/enter.svg"
|
|
128
|
+
alt=""
|
|
129
|
+
/>
|
|
130
|
+
<span v-else-if="item1.length > 1" :class="item1">{{
|
|
131
|
+
item1
|
|
132
|
+
}}</span>
|
|
133
|
+
<span v-else :class="item1">{{ item1 }}</span>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
107
137
|
</div>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
138
|
+
<!-- 中英文切换 -->
|
|
139
|
+
<div class="btns" @touchmove.stop.prevent>
|
|
140
|
+
<div v-show="keyStore.showCheckChinese" @click="checkChinese">
|
|
141
|
+
<!-- <el-icon><Switch /></el-icon -->
|
|
142
|
+
<span :class="keyStore.isChinese ? 'ch' : ''">中</span>/<span
|
|
143
|
+
:class="keyStore.isChinese ? '' : 'ch'"
|
|
144
|
+
>英</span
|
|
145
|
+
>
|
|
146
|
+
</div>
|
|
147
|
+
<span>确认</span>
|
|
148
|
+
</div>
|
|
149
|
+
<!-- <div class="symbol_list" v-show="keyStore.inputType == 'symbol'"></div> -->
|
|
120
150
|
</div>
|
|
121
|
-
<!-- <div class="symbol_list" v-show="keyStore.inputType == 'symbol'"></div> -->
|
|
122
|
-
</div>
|
|
123
151
|
</template>
|
|
124
152
|
|
|
125
153
|
<script>
|
|
126
154
|
export default {
|
|
127
|
-
|
|
155
|
+
name: "SyKeyboard",
|
|
128
156
|
};
|
|
129
157
|
</script>
|
|
130
158
|
|
|
131
159
|
<script setup>
|
|
132
160
|
import { onMounted, reactive, ref, onBeforeUnmount, watchEffect } from "vue";
|
|
133
|
-
import mitt from "mitt";
|
|
134
161
|
|
|
135
162
|
//#region init ------------------------------------------------------------
|
|
136
|
-
const emitter = mitt();
|
|
137
163
|
const globalKey = window.globalThis.$sy.key;
|
|
138
164
|
const keyStore = reactive({
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
165
|
+
keyboardcon: false,
|
|
166
|
+
currentElement: null,
|
|
167
|
+
inputType: true ? "text" : "number",
|
|
168
|
+
showCheckChinese: !false, //是否展示中文输入切换
|
|
169
|
+
isChinese: false,
|
|
144
170
|
});
|
|
145
171
|
const isSymbol = ref(false);
|
|
146
172
|
//#endregion -----------------------------------------------------------
|
|
@@ -151,113 +177,117 @@ const isSymbol = ref(false);
|
|
|
151
177
|
|
|
152
178
|
let st = null;
|
|
153
179
|
watchEffect(() => {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
180
|
+
if (keyStore.keyboardcon) {
|
|
181
|
+
clearTimeout(st);
|
|
182
|
+
document.body.style = "padding-bottom:30vh;";
|
|
183
|
+
} else {
|
|
184
|
+
st = setTimeout(() => {
|
|
185
|
+
document.body.style = "padding:0;";
|
|
186
|
+
}, 0);
|
|
187
|
+
}
|
|
162
188
|
});
|
|
163
189
|
|
|
164
190
|
const numberKeyBoradMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, [".", ":"], 0, "del"];
|
|
165
191
|
const textKeyMap = [
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
192
|
+
["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
|
|
193
|
+
["a", "s", "d", "f", "g", "h", "j", "k", "l"],
|
|
194
|
+
["shift", "z", "x", "c", "v", "b", "n", "m", "del"],
|
|
195
|
+
["&123", "space", "enter"],
|
|
170
196
|
];
|
|
171
197
|
|
|
172
198
|
const symbolMap1 = [
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
199
|
+
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
|
|
200
|
+
["-", "/", ":", ";", "(", ")", "$", "&", "@", '"'],
|
|
201
|
+
["#+=", ".", ",", "?", "!", "'", "del"],
|
|
202
|
+
["ABC", "space", "enter"],
|
|
177
203
|
];
|
|
178
204
|
|
|
179
205
|
const symbolMap2 = [
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
206
|
+
["[", "]", "{", "}", "#", "%", "^", "*", "+", "="],
|
|
207
|
+
["_", "\\", "|", "~", "<", ">", "€", "£", "¥", "·"],
|
|
208
|
+
["123", ".", ",", "?", "!", "'", "del"],
|
|
209
|
+
["ABC", "space", "enter"],
|
|
184
210
|
];
|
|
185
211
|
|
|
186
212
|
const showMore = ref(false);
|
|
187
213
|
const huanhang = ref(false);
|
|
188
214
|
const moreTextCli = () => {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
215
|
+
// keyStore.currentElement.focus();
|
|
216
|
+
globalKey.currentElement.focus();
|
|
217
|
+
|
|
218
|
+
showMore.value = !showMore.value;
|
|
219
|
+
if (showMore.value) {
|
|
220
|
+
huanhang.value = true;
|
|
221
|
+
} else {
|
|
222
|
+
setTimeout(() => {
|
|
223
|
+
huanhang.value = false;
|
|
224
|
+
}, 500);
|
|
225
|
+
}
|
|
200
226
|
};
|
|
201
227
|
const chineseCli = (item) => {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
228
|
+
// keyStore.currentElement.focus();
|
|
229
|
+
globalKey.currentElement.focus();
|
|
230
|
+
setInputValue(item);
|
|
231
|
+
selectCN(item);
|
|
232
|
+
console.log(cn_input.value);
|
|
233
|
+
if (!cn_input.value) {
|
|
234
|
+
showMore.value = false;
|
|
235
|
+
}
|
|
210
236
|
};
|
|
211
237
|
|
|
212
238
|
//选择中文
|
|
213
239
|
const selectCN = (text) => {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
240
|
+
let strList = cn_input.value.split("'");
|
|
241
|
+
if (strList.length === 1 || text.length >= strList.length) {
|
|
242
|
+
cn_input.value = "";
|
|
243
|
+
cn_list_str.value = [];
|
|
244
|
+
// l_min.value = 0;
|
|
245
|
+
// l_max.value = 10;
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
setCn_input(text);
|
|
223
249
|
};
|
|
224
250
|
//设置中文输入
|
|
225
251
|
const setCn_input = (text) => {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
let str = "";
|
|
239
|
-
const cn_inputList = cn_input.value.split("'");
|
|
240
|
-
for (let i = 0; i < cn_inputList.length; i++) {
|
|
241
|
-
let item = cn_inputList[i];
|
|
242
|
-
for (let key of itemList) {
|
|
243
|
-
let list = key.split("");
|
|
244
|
-
let count = 0;
|
|
245
|
-
for (let k = 0; k < list.length; k++) {
|
|
246
|
-
if (key.charAt(k) === item.charAt(k)) {
|
|
247
|
-
count += 1;
|
|
248
|
-
if (k === 0 && item.length != key.length && key.length > item.length) {
|
|
249
|
-
// 用于处理首单词缩写法
|
|
250
|
-
str = item;
|
|
251
|
-
}
|
|
252
|
+
const singleDict = dict;
|
|
253
|
+
let itemList = [];
|
|
254
|
+
for (let key in singleDict) {
|
|
255
|
+
let value = singleDict[key];
|
|
256
|
+
if (typeof value === "string") {
|
|
257
|
+
let valueList = value.split("");
|
|
258
|
+
let item = valueList.find((item) => item === text);
|
|
259
|
+
if (item) {
|
|
260
|
+
itemList.push(key);
|
|
261
|
+
}
|
|
252
262
|
}
|
|
253
|
-
|
|
254
|
-
|
|
263
|
+
}
|
|
264
|
+
let str = "";
|
|
265
|
+
const cn_inputList = cn_input.value.split("'");
|
|
266
|
+
for (let i = 0; i < cn_inputList.length; i++) {
|
|
267
|
+
let item = cn_inputList[i];
|
|
268
|
+
for (let key of itemList) {
|
|
269
|
+
let list = key.split("");
|
|
270
|
+
let count = 0;
|
|
271
|
+
for (let k = 0; k < list.length; k++) {
|
|
272
|
+
if (key.charAt(k) === item.charAt(k)) {
|
|
273
|
+
count += 1;
|
|
274
|
+
if (
|
|
275
|
+
k === 0 &&
|
|
276
|
+
item.length != key.length &&
|
|
277
|
+
key.length > item.length
|
|
278
|
+
) {
|
|
279
|
+
// 用于处理首单词缩写法
|
|
280
|
+
str = item;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
if (count === list.length) {
|
|
284
|
+
str = item;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
255
287
|
}
|
|
256
|
-
}
|
|
257
288
|
}
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
findChinese();
|
|
289
|
+
cn_input.value = cn_inputList.filter((item) => item != str).join("'");
|
|
290
|
+
findChinese();
|
|
261
291
|
};
|
|
262
292
|
|
|
263
293
|
let lists = ref([]);
|
|
@@ -266,173 +296,175 @@ let active = ref(1);
|
|
|
266
296
|
let toUpKeyCase = ref(false);
|
|
267
297
|
|
|
268
298
|
const choosekey = (item) => {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
299
|
+
try {
|
|
300
|
+
// keyStore.currentElement.focus();
|
|
301
|
+
globalKey.currentElement.focus();
|
|
302
|
+
} catch (error) {}
|
|
303
|
+
|
|
304
|
+
switch (item) {
|
|
305
|
+
case "del":
|
|
306
|
+
if (keyStore.isChinese && cn_input.value?.length) {
|
|
307
|
+
// 处理拼音删除
|
|
308
|
+
delPinyin();
|
|
309
|
+
} else {
|
|
310
|
+
// 普通删除
|
|
311
|
+
delInputText();
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
break;
|
|
315
|
+
case "shift":
|
|
316
|
+
toUpKeyCase.value = !toUpKeyCase.value;
|
|
317
|
+
lists.value = lists.value.map((i) => {
|
|
318
|
+
i = i.map((j) => {
|
|
319
|
+
if (j.length == 1) {
|
|
320
|
+
if (toUpKeyCase.value) return j.toUpperCase();
|
|
321
|
+
else return j.toLowerCase();
|
|
322
|
+
} else {
|
|
323
|
+
return j;
|
|
324
|
+
}
|
|
325
|
+
});
|
|
326
|
+
return i;
|
|
327
|
+
});
|
|
328
|
+
break;
|
|
329
|
+
case "space":
|
|
330
|
+
// keyStore.currentElement.value += " ";
|
|
331
|
+
setInputValue(" ");
|
|
332
|
+
break;
|
|
333
|
+
case "&123":
|
|
334
|
+
lists.value = symbolMap1;
|
|
335
|
+
toUpKeyCase.value = false;
|
|
336
|
+
isSymbol.value = true;
|
|
337
|
+
|
|
338
|
+
break;
|
|
339
|
+
case "ABC":
|
|
340
|
+
lists.value = textKeyMap;
|
|
341
|
+
isSymbol.value = false;
|
|
342
|
+
break;
|
|
343
|
+
case "#+=":
|
|
344
|
+
lists.value = symbolMap2;
|
|
345
|
+
break;
|
|
346
|
+
case "123":
|
|
347
|
+
lists.value = symbolMap1;
|
|
348
|
+
|
|
349
|
+
break;
|
|
350
|
+
case "enter":
|
|
351
|
+
// keyStore.currentElement.value += "\n";
|
|
352
|
+
globalKey.currentElement.value += "\n";
|
|
353
|
+
break;
|
|
354
|
+
default:
|
|
355
|
+
if (keyStore.isChinese && !toUpKeyCase.value) {
|
|
356
|
+
chinese(item);
|
|
357
|
+
} else {
|
|
358
|
+
setInputValue(item);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
break;
|
|
362
|
+
}
|
|
333
363
|
};
|
|
334
364
|
|
|
335
365
|
/**删除字符串的某个字符*/
|
|
336
366
|
const delStringLast = (text, index) => {
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
367
|
+
if (index < 0) return;
|
|
368
|
+
let arrText = text.split("");
|
|
369
|
+
if (index > 0) {
|
|
370
|
+
arrText[index - 1] = "";
|
|
371
|
+
} else {
|
|
372
|
+
arrText[index] = "";
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
arrText = arrText.filter((item) => item);
|
|
376
|
+
const endIndex = arrText.length - 1;
|
|
377
|
+
if (arrText[endIndex] === "'") {
|
|
378
|
+
arrText[endIndex] = "";
|
|
379
|
+
}
|
|
380
|
+
let result = arrText.join("");
|
|
381
|
+
|
|
382
|
+
return result;
|
|
353
383
|
};
|
|
354
384
|
// 拼音删除
|
|
355
385
|
const delPinyin = () => {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
386
|
+
cn_input.value = delStringLast(cn_input.value, cn_input.value.length);
|
|
387
|
+
if (cn_input.value === "") {
|
|
388
|
+
cn_list_str.value = [];
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
const specialPinYin = ["u", "v", "i"].includes(cn_input.value.split("")[0]);
|
|
392
|
+
if (cn_list_str.value && cn_list_str.value.length === 1 && specialPinYin) {
|
|
393
|
+
//@ts-ignore
|
|
394
|
+
cn_list_str.value = [cn_input.value];
|
|
395
|
+
return;
|
|
396
|
+
}
|
|
397
|
+
let re = new RegExp(`^${cn_input.value}\\w*`);
|
|
398
|
+
let keys = Object.keys(dict)
|
|
399
|
+
.filter((key) => {
|
|
400
|
+
const result = re.test(key);
|
|
401
|
+
return result;
|
|
402
|
+
})
|
|
403
|
+
.sort();
|
|
404
|
+
|
|
405
|
+
cn_list_str.value =
|
|
406
|
+
(keys.length > 1
|
|
407
|
+
? keys.reduce((a, b) => a + dict[b], "")
|
|
408
|
+
: dict[keys[0]]) || "".split("");
|
|
409
|
+
|
|
410
|
+
findChinese("del");
|
|
380
411
|
};
|
|
381
412
|
|
|
382
413
|
// 普通删除字符
|
|
383
414
|
const delInputText = () => {
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
415
|
+
// let carePos = getCaretPosition(keyStore.currentElement);
|
|
416
|
+
let carePos = getCaretPosition(globalKey.currentElement);
|
|
417
|
+
// let text = keyStore.currentElement.value;
|
|
418
|
+
let text = globalKey.currentElement.value;
|
|
419
|
+
if (carePos <= 0 || carePos > text.length) {
|
|
420
|
+
// keyStore.currentElement.value = text;
|
|
421
|
+
globalKey.currentElement.value = text;
|
|
422
|
+
} else {
|
|
423
|
+
// keyStore.currentElement.value =
|
|
424
|
+
// text.slice(0, carePos - 1) + text.slice(carePos);
|
|
425
|
+
globalKey.currentElement.value =
|
|
426
|
+
text.slice(0, carePos - 1) + text.slice(carePos);
|
|
427
|
+
}
|
|
428
|
+
// keyStore.currentElement.setSelectionRange(carePos - 1, carePos - 1);
|
|
429
|
+
globalKey.currentElement.setSelectionRange(carePos - 1, carePos - 1);
|
|
430
|
+
triggerModel();
|
|
399
431
|
};
|
|
400
432
|
|
|
401
433
|
// 输入内容
|
|
402
434
|
const setInputValue = (item) => {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
435
|
+
item = `${item}`;
|
|
436
|
+
// let carePos = getCaretPosition(keyStore.currentElement);
|
|
437
|
+
let carePos = getCaretPosition(globalKey.currentElement);
|
|
438
|
+
|
|
439
|
+
// let text = keyStore.currentElement.value;
|
|
440
|
+
let text = globalKey.currentElement.value;
|
|
441
|
+
|
|
442
|
+
if (carePos <= 0) {
|
|
443
|
+
text = item + text;
|
|
444
|
+
} else if (carePos > text.length) {
|
|
445
|
+
text = text + item;
|
|
446
|
+
} else {
|
|
447
|
+
text = text.slice(0, carePos) + item + text.slice(carePos);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
if (toUpKeyCase.value) {
|
|
451
|
+
// keyStore.currentElement.value = `${text}`.toUpperCase();
|
|
452
|
+
globalKey.currentElement.value = `${text}`.toUpperCase();
|
|
453
|
+
} else {
|
|
454
|
+
// keyStore.currentElement.value = text;
|
|
455
|
+
globalKey.currentElement.value = text;
|
|
456
|
+
}
|
|
457
|
+
carePos += item.length + 1;
|
|
458
|
+
|
|
459
|
+
// keyStore.currentElement.setSelectionRange(carePos - 1, carePos - 1);
|
|
460
|
+
globalKey.currentElement.setSelectionRange(carePos - 1, carePos - 1);
|
|
461
|
+
triggerModel();
|
|
462
|
+
// const reg = /^[a-zA-Z]$/;
|
|
463
|
+
// if (toUpKeyCase.value && reg.test(item)) {
|
|
464
|
+
// keyStore.currentElement.value += item.toUpperCase();
|
|
465
|
+
// } else {
|
|
466
|
+
// keyStore.currentElement.value += item;
|
|
467
|
+
// }
|
|
436
468
|
};
|
|
437
469
|
|
|
438
470
|
const cn_input = ref("");
|
|
@@ -446,236 +478,244 @@ let doubleSpell = {};
|
|
|
446
478
|
|
|
447
479
|
// 获取词库
|
|
448
480
|
const getChinese = () => {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
});
|
|
452
|
-
|
|
453
|
-
const promise1 = import("./static/dict/chowder.json").then((res) => {
|
|
454
|
-
doubleSpell = res;
|
|
455
|
-
});
|
|
456
|
-
promiseList.push(promise1);
|
|
457
|
-
Promise.all(promiseList)
|
|
458
|
-
.then(() => {
|
|
459
|
-
console.log("加载完成");
|
|
460
|
-
})
|
|
461
|
-
.catch((err) => {
|
|
462
|
-
console.error("词库错误", err);
|
|
481
|
+
const promise = import("./static/dict/baseDict.json").then((res) => {
|
|
482
|
+
dict = res;
|
|
463
483
|
});
|
|
484
|
+
|
|
485
|
+
const promise1 = import("./static/dict/chowder.json").then((res) => {
|
|
486
|
+
doubleSpell = res;
|
|
487
|
+
});
|
|
488
|
+
promiseList.push(promise1);
|
|
489
|
+
Promise.all(promiseList)
|
|
490
|
+
.then(() => {
|
|
491
|
+
console.log("加载完成");
|
|
492
|
+
})
|
|
493
|
+
.catch((err) => {
|
|
494
|
+
console.error("词库错误", err);
|
|
495
|
+
});
|
|
464
496
|
};
|
|
465
497
|
getChinese();
|
|
466
498
|
|
|
467
499
|
// 中文输入
|
|
468
500
|
const chinese = (key) => {
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
501
|
+
const reg = /^[a-zA-Z]$/;
|
|
502
|
+
if (!reg.test(key)) {
|
|
503
|
+
setInputValue(key);
|
|
504
|
+
return;
|
|
505
|
+
}
|
|
506
|
+
cn_input.value += key; //拼音输入框添加拼音
|
|
507
|
+
if (cn_input.value[0] == "'") {
|
|
508
|
+
cn_input.value = cn_input.value.slice(1);
|
|
509
|
+
}
|
|
510
|
+
const specialPinYin = ["u", "v", "i"].includes(cn_input.value.split("")[0]); //判断是否是特殊拼音
|
|
511
|
+
if (specialPinYin) {
|
|
512
|
+
//如果是特殊拼音
|
|
513
|
+
if (!cn_list_str.value.length) {
|
|
514
|
+
//如果没有拼音列表
|
|
515
|
+
//@ts-ignore
|
|
516
|
+
cn_list_str.value = [key]; //拼音列表添加拼音
|
|
517
|
+
} else {
|
|
518
|
+
const value = cn_list_str.value[0] + key; //拼音列表第一个拼音加上当前拼音
|
|
519
|
+
//@ts-ignore
|
|
520
|
+
cn_list_str.value[0] = value; //拼音列表第一个拼音替换为新的拼音
|
|
521
|
+
}
|
|
522
|
+
return;
|
|
489
523
|
}
|
|
490
|
-
return;
|
|
491
|
-
}
|
|
492
524
|
|
|
493
|
-
|
|
525
|
+
findChinese("add", key); //查找中文
|
|
494
526
|
};
|
|
495
527
|
|
|
496
528
|
// 查字典
|
|
497
529
|
const findChinese = (type, key) => {
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
530
|
+
// type = del key不需要传，type = add key必须要传
|
|
531
|
+
l_min.value = 0; //最小值
|
|
532
|
+
l_max.value = 10; //最大值
|
|
533
|
+
const pinYinList = cn_input.value.split("'"); //拼音列表
|
|
534
|
+
let pinYin = pinYinList[pinYinList.length - 1]; //当前拼音
|
|
535
|
+
|
|
536
|
+
let re = new RegExp(`^${pinYin}\\w*`); //正则,匹配当前拼音开头的拼音
|
|
537
|
+
let keys = Object.keys(dict) //获取拼音字典的key
|
|
538
|
+
.filter((item) => {
|
|
539
|
+
//过滤
|
|
540
|
+
let strList = pinYin.split(""); //当前拼音转数组
|
|
541
|
+
|
|
542
|
+
const temp = ["h", "o", "n", "a", "e"].includes(
|
|
543
|
+
strList[strList.length - 1] //判断是否是特殊拼音
|
|
544
|
+
);
|
|
545
|
+
if (pinYin.length >= 2 && !temp) {
|
|
546
|
+
//如果是特殊拼音
|
|
547
|
+
if (item === pinYin) return true; //如果拼音字典的key等于当前拼音，返回true
|
|
548
|
+
} else {
|
|
549
|
+
let result = re.test(item); //如果不是特殊拼音，返回正则匹配结果
|
|
550
|
+
return result;
|
|
551
|
+
}
|
|
552
|
+
})
|
|
553
|
+
.sort();
|
|
554
|
+
cn_list_str.value =
|
|
555
|
+
keys.length > 1
|
|
556
|
+
? keys.reduce((a, b) => a + dict[b], "")
|
|
557
|
+
: dict[keys[0]]; //如果拼音列表大于1，拼接拼音列表，否则直接赋值
|
|
558
|
+
// cn_list_str.value = cn_list_str.value.replaceAll("[object Object]", "");
|
|
559
|
+
|
|
560
|
+
if (!cn_list_str.value || (!cn_list_str.value.length && type === "del")) {
|
|
561
|
+
//如果拼音列表不存在或者拼音列表长度为0并且type为del
|
|
562
|
+
cn_input.value = cn_input.value.replace(
|
|
563
|
+
new RegExp(`(.*)${key}`),
|
|
564
|
+
`$1'${key}`
|
|
565
|
+
);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
if (!cn_list_str.value && !Array.isArray(cn_list_str.value)) {
|
|
569
|
+
cn_list_str.value = [];
|
|
570
|
+
}
|
|
534
571
|
|
|
535
|
-
|
|
572
|
+
keys = cn_input.value.split("'");
|
|
536
573
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
574
|
+
if (keys.length >= 2) {
|
|
575
|
+
cn_list_str.value = [];
|
|
576
|
+
findDoubleSpell();
|
|
577
|
+
}
|
|
541
578
|
};
|
|
542
579
|
|
|
543
580
|
// 连续输入
|
|
544
581
|
const findDoubleSpell = () => {
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
582
|
+
let keys = cn_input.value.split("'");
|
|
583
|
+
const partDict = doubleSpell[cn_input.value.charAt(0)];
|
|
584
|
+
if (!partDict) return;
|
|
585
|
+
if (["an"].includes(keys[keys.length - 1])) {
|
|
586
|
+
let tempStr = keys[keys.length - 2];
|
|
587
|
+
if (["n"].includes(tempStr.charAt(tempStr.length - 1))) {
|
|
588
|
+
let newTempStr = tempStr.slice(0, tempStr.length - 1);
|
|
589
|
+
keys = [
|
|
590
|
+
newTempStr,
|
|
591
|
+
tempStr.slice(tempStr.length - 1) + keys[keys.length - 1],
|
|
592
|
+
];
|
|
593
|
+
cn_input.value = keys.join("'");
|
|
594
|
+
}
|
|
554
595
|
}
|
|
555
|
-
}
|
|
556
596
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
597
|
+
let keyResult = Object.keys(partDict).filter((key) => {
|
|
598
|
+
const keys = key.split("'");
|
|
599
|
+
const cn_inputList = cn_input.value.split("'");
|
|
600
|
+
const isLen = cn_inputList.length === keys.length;
|
|
601
|
+
if (!isLen) return;
|
|
602
|
+
let result = true;
|
|
603
|
+
for (let i = 0; i < keys.length; i++) {
|
|
604
|
+
if (keys[i].charAt(0) != cn_inputList[i].charAt(0)) {
|
|
605
|
+
result = false;
|
|
606
|
+
} else {
|
|
607
|
+
const keyItemList = keys[i].split("");
|
|
608
|
+
const strList = cn_inputList[i].split("");
|
|
609
|
+
for (let j = 0; j < strList.length; j++) {
|
|
610
|
+
if (!strList[j]) break;
|
|
611
|
+
if (keyItemList[j] != strList[j]) {
|
|
612
|
+
result = false;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
if (result && isLen) {
|
|
618
|
+
return partDict[key];
|
|
619
|
+
}
|
|
620
|
+
});
|
|
621
|
+
|
|
622
|
+
let strList = [];
|
|
623
|
+
let singleDictList = [];
|
|
624
|
+
const singleDict = dict;
|
|
625
|
+
for (let key of keyResult) {
|
|
626
|
+
let keyList = key.split("'");
|
|
627
|
+
strList.push(partDict[key].split(","));
|
|
628
|
+
for (let item of keyList) {
|
|
629
|
+
if (singleDict[item]) {
|
|
630
|
+
singleDictList.push(singleDict[item].split(""));
|
|
631
|
+
}
|
|
574
632
|
}
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
if (result && isLen) {
|
|
578
|
-
return partDict[key];
|
|
579
|
-
}
|
|
580
|
-
});
|
|
581
|
-
|
|
582
|
-
let strList = [];
|
|
583
|
-
let singleDictList = [];
|
|
584
|
-
const singleDict = dict;
|
|
585
|
-
for (let key of keyResult) {
|
|
586
|
-
let keyList = key.split("'");
|
|
587
|
-
strList.push(partDict[key].split(","));
|
|
588
|
-
for (let item of keyList) {
|
|
589
|
-
if (singleDict[item]) {
|
|
590
|
-
singleDictList.push(singleDict[item].split(""));
|
|
591
|
-
}
|
|
592
633
|
}
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
634
|
+
if (!keyResult.length && keys.length) {
|
|
635
|
+
for (let item of keys) {
|
|
636
|
+
if (singleDict[item]) {
|
|
637
|
+
singleDictList.push(singleDict[item].split(""));
|
|
638
|
+
}
|
|
639
|
+
}
|
|
599
640
|
}
|
|
600
|
-
}
|
|
601
641
|
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
642
|
+
singleDictList = Array.from(new Set(singleDictList.flat(2)));
|
|
643
|
+
strList = strList
|
|
644
|
+
.flat(2)
|
|
645
|
+
//@ts-ignore
|
|
646
|
+
.sort((a, b) => {
|
|
647
|
+
if (b.length > a.length) return -1;
|
|
648
|
+
})
|
|
649
|
+
.reverse();
|
|
605
650
|
//@ts-ignore
|
|
606
|
-
.
|
|
607
|
-
if (b.length > a.length) return -1;
|
|
608
|
-
})
|
|
609
|
-
.reverse();
|
|
610
|
-
//@ts-ignore
|
|
611
|
-
cn_list_str.value = strList.concat(singleDictList);
|
|
651
|
+
cn_list_str.value = strList.concat(singleDictList);
|
|
612
652
|
};
|
|
613
653
|
|
|
614
654
|
//获取光标位置
|
|
615
655
|
const getCaretPosition = (element) => {
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
656
|
+
let carePos = 0;
|
|
657
|
+
try {
|
|
658
|
+
carePos = element.selectionStart;
|
|
659
|
+
} catch (error) {}
|
|
660
|
+
cursorPosition.value = carePos;
|
|
661
|
+
return carePos;
|
|
662
|
+
// sel,
|
|
663
|
+
// range;
|
|
664
|
+
|
|
665
|
+
// if (window.getSelection) {
|
|
666
|
+
// sel = window.getSelection();
|
|
667
|
+
|
|
668
|
+
// if (sel?.rangeCount) {
|
|
669
|
+
// range = sel.getRangeAt(0);
|
|
670
|
+
// console.log(
|
|
671
|
+
// "🚀 ~ file: Keyboardcon.vue:459 ~ getCaretPosition ~ range:",
|
|
672
|
+
// range
|
|
673
|
+
// );
|
|
674
|
+
// if (range.commonAncestorContainer.children[0] == element) {
|
|
675
|
+
// // carePos = range.endOffset;
|
|
676
|
+
// carePos = range.endOffset;
|
|
677
|
+
|
|
678
|
+
// if (
|
|
679
|
+
// range.commonAncestorContainer
|
|
680
|
+
// // range.commonAncestorContainer.length !=
|
|
681
|
+
// // range.commonAncestorContainer.data.trim().length
|
|
682
|
+
// ) {
|
|
683
|
+
// carePos -= 1;
|
|
684
|
+
// }
|
|
685
|
+
// }
|
|
686
|
+
// }
|
|
687
|
+
// }
|
|
648
688
|
};
|
|
649
689
|
|
|
650
690
|
// 符号切换
|
|
651
691
|
const checkChinese = (item) => {
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
692
|
+
console.log(cn_list_str.value);
|
|
693
|
+
cn_input.value = "";
|
|
694
|
+
cn_list_str.value = [];
|
|
695
|
+
showMore.value = false;
|
|
696
|
+
// keyStore.currentElement.focus();
|
|
697
|
+
// keyStore.isChinese = !keyStore.isChinese;
|
|
698
|
+
globalKey.currentElement.focus();
|
|
699
|
+
keyStore.isChinese = !keyStore.isChinese;
|
|
660
700
|
};
|
|
661
701
|
|
|
662
702
|
// 类型
|
|
663
703
|
watchEffect(() => {
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
704
|
+
if (keyStore.inputType == "number") {
|
|
705
|
+
lists.value = numberKeyBoradMap;
|
|
706
|
+
} else {
|
|
707
|
+
lists.value = textKeyMap;
|
|
708
|
+
}
|
|
669
709
|
});
|
|
670
710
|
|
|
671
711
|
//#endregion -----------------------------------------------------------
|
|
672
712
|
|
|
673
713
|
//#region $sy global ------------------------------------------------------------
|
|
674
714
|
const showKeyboard = () => {
|
|
675
|
-
|
|
715
|
+
keyStore.keyboardcon = true;
|
|
676
716
|
};
|
|
677
717
|
const hideKeyboard = () => {
|
|
678
|
-
|
|
718
|
+
keyStore.keyboardcon = false;
|
|
679
719
|
};
|
|
680
720
|
window.globalThis.$sy.key.open = showKeyboard;
|
|
681
721
|
window.globalThis.$sy.key.close = hideKeyboard;
|
|
@@ -684,11 +724,11 @@ window.globalThis.$sy.key.close = hideKeyboard;
|
|
|
684
724
|
//#region input ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️
|
|
685
725
|
// 手动触发input事件
|
|
686
726
|
const triggerModel = () => {
|
|
687
|
-
|
|
727
|
+
globalKey.currentElement.dispatchEvent(new Event("input"));
|
|
688
728
|
};
|
|
689
729
|
|
|
690
730
|
const makeFocus = (e) => {
|
|
691
|
-
|
|
731
|
+
globalKey.currentElement.focus();
|
|
692
732
|
};
|
|
693
733
|
|
|
694
734
|
//#endregion ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
|
|
@@ -704,32 +744,33 @@ const longpressSt = ref(false);
|
|
|
704
744
|
|
|
705
745
|
// 定义长按事件逻辑
|
|
706
746
|
const onLongPress = (t) => {
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
747
|
+
// alert("长按事件触发");
|
|
748
|
+
longpressSt.value = setInterval(() => {
|
|
749
|
+
// console.log("长按触发", t);
|
|
750
|
+
choosekey(t);
|
|
751
|
+
}, 50);
|
|
712
752
|
};
|
|
713
753
|
|
|
714
754
|
// 开始按压的处理函数
|
|
715
755
|
const startPress = (e) => {
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
756
|
+
let value =
|
|
757
|
+
e.target.children[0]?.innerText || e.target.children[0].className;
|
|
758
|
+
if (value != "del") return;
|
|
759
|
+
pressTimer.value = setTimeout(() => {
|
|
760
|
+
onLongPress(value);
|
|
761
|
+
}, 500); // 设置长按时间为500毫秒
|
|
721
762
|
};
|
|
722
763
|
|
|
723
764
|
// 结束按压的处理函数
|
|
724
765
|
const endPress = () => {
|
|
725
|
-
|
|
726
|
-
|
|
766
|
+
clearTimeout(pressTimer.value);
|
|
767
|
+
clearInterval(longpressSt.value);
|
|
727
768
|
};
|
|
728
769
|
|
|
729
770
|
// 取消按压的处理函数
|
|
730
771
|
const cancelPress = () => {
|
|
731
|
-
|
|
732
|
-
|
|
772
|
+
clearTimeout(pressTimer.value);
|
|
773
|
+
clearInterval(longpressSt.value);
|
|
733
774
|
};
|
|
734
775
|
|
|
735
776
|
// 添加和清理事件监听器
|
|
@@ -743,442 +784,442 @@ const cancelPress = () => {
|
|
|
743
784
|
@import "./theme.scss";
|
|
744
785
|
|
|
745
786
|
.defaultCss {
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
787
|
+
--h: 0.7rem;
|
|
788
|
+
--gap: 0.1rem;
|
|
789
|
+
--fontSize: 0.4rem;
|
|
790
|
+
--borra: 0.2em;
|
|
750
791
|
}
|
|
751
792
|
|
|
752
793
|
.upKeyCase {
|
|
753
|
-
|
|
794
|
+
--fontSize: 0.35rem;
|
|
754
795
|
}
|
|
755
796
|
|
|
756
797
|
.keyboardcon {
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
box-sizing: border-box;
|
|
764
|
-
box-shadow: 0 0 0.3rem 0 rgb(117, 117, 117);
|
|
765
|
-
z-index: 10000;
|
|
766
|
-
// // @include key_background("keyboard_background");
|
|
767
|
-
background: var(--keyboard_background);
|
|
768
|
-
border-radius: 0.25rem 0.25rem 0 0;
|
|
769
|
-
transition: all 0.2s;
|
|
770
|
-
& * {
|
|
798
|
+
position: fixed;
|
|
799
|
+
background-color: #212123;
|
|
800
|
+
width: 100%;
|
|
801
|
+
bottom: 0;
|
|
802
|
+
font-size: var(--fontSize);
|
|
803
|
+
padding: 0.25rem 0.25rem 0.125rem;
|
|
771
804
|
box-sizing: border-box;
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
font-size: 0.25rem;
|
|
780
|
-
|
|
781
|
-
> div {
|
|
782
|
-
height: 0.25rem;
|
|
783
|
-
span {
|
|
784
|
-
color: gainsboro;
|
|
785
|
-
transition: all 0.3s;
|
|
786
|
-
}
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
.ch {
|
|
790
|
-
font-size: 0.35rem;
|
|
791
|
-
color: rgb(0, 123, 255);
|
|
792
|
-
}
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
.chinese {
|
|
796
|
-
// border: 1px solid red;
|
|
797
|
-
|
|
798
|
-
.pinyin {
|
|
799
|
-
padding: 4px;
|
|
800
|
-
box-sizing: border-box;
|
|
801
|
-
// border: 1px solid red;
|
|
802
|
-
}
|
|
803
|
-
|
|
804
|
-
.wenzi {
|
|
805
|
-
position: relative;
|
|
806
|
-
height: 0.6rem;
|
|
807
|
-
|
|
808
|
-
// border: 1px solid red;
|
|
809
|
-
background: var(--keyboard_background);
|
|
810
|
-
margin-bottom: 0.1rem;
|
|
811
|
-
.wenzi_box {
|
|
812
|
-
display: flex;
|
|
813
|
-
// flex-wrap: wrap;
|
|
814
|
-
gap: 10px;
|
|
815
|
-
padding: 5px;
|
|
816
|
-
overflow: auto;
|
|
817
|
-
&::-webkit-scrollbar {
|
|
818
|
-
display: none; /* 适用于 Chrome, Safari 和 Opera */
|
|
819
|
-
}
|
|
820
|
-
scrollbar-width: none; /* 适用于 Firefox */
|
|
821
|
-
position: absolute;
|
|
822
|
-
left: 0;
|
|
823
|
-
top: 0;
|
|
824
|
-
width: 98%;
|
|
825
|
-
height: 100%;
|
|
826
|
-
background: var(--keyboard_background);
|
|
827
|
-
z-index: 1;
|
|
828
|
-
transition: all 0.5s;
|
|
829
|
-
box-sizing: border-box;
|
|
830
|
-
|
|
831
|
-
span {
|
|
832
|
-
flex-shrink: 0;
|
|
833
|
-
padding: 0.04rem 0.08rem;
|
|
834
|
-
border-radius: 6px;
|
|
835
|
-
// border: 1px solid red;
|
|
836
|
-
height: fit-content;
|
|
837
|
-
|
|
838
|
-
&:active {
|
|
839
|
-
// @include key_background("key_active_background");
|
|
840
|
-
background: var(--key_active_background);
|
|
841
|
-
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
842
|
-
transform: scale(0.99);
|
|
843
|
-
}
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
|
|
847
|
-
.wenzi_box_more {
|
|
848
|
-
// flex-wrap: wrap;
|
|
849
|
-
padding-right: 0.34rem;
|
|
805
|
+
box-shadow: 0 0 0.3rem 0 rgb(117, 117, 117);
|
|
806
|
+
z-index: 10000;
|
|
807
|
+
// // @include key_background("keyboard_background");
|
|
808
|
+
background: var(--keyboard_background);
|
|
809
|
+
border-radius: 0.25rem 0.25rem 0 0;
|
|
810
|
+
transition: all 0.2s;
|
|
811
|
+
& * {
|
|
850
812
|
box-sizing: border-box;
|
|
851
|
-
width: 102%;
|
|
852
|
-
left: -0.03rem;
|
|
853
|
-
// height: 31vh;
|
|
854
|
-
height: 4.5rem;
|
|
855
|
-
|
|
856
|
-
// border: 1px solid red;
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
.moreText {
|
|
860
|
-
position: absolute;
|
|
861
|
-
height: 0.55rem;
|
|
862
|
-
top: 0;
|
|
863
|
-
right: -5px;
|
|
864
|
-
z-index: 100;
|
|
865
|
-
padding: 0 0.05rem;
|
|
866
|
-
display: flex;
|
|
867
|
-
justify-content: center;
|
|
868
|
-
align-items: center;
|
|
869
|
-
border-radius: var(--borra);
|
|
870
|
-
// border: 1px solid red;
|
|
871
|
-
|
|
872
|
-
// @include key_background("keyboard_background");
|
|
873
|
-
background: var(--keyboard_background);
|
|
874
|
-
|
|
875
|
-
&:active {
|
|
876
|
-
// @include key_background("key_active_background");
|
|
877
|
-
background: var(--key_active_background);
|
|
878
|
-
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
879
|
-
transform: scale(0.99);
|
|
880
|
-
}
|
|
881
|
-
|
|
882
|
-
.el-icon {
|
|
883
|
-
transition: all 0.4s ease;
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
813
|
}
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
.number_list {
|
|
890
|
-
display: grid;
|
|
891
|
-
grid-template-columns: repeat(3, 1fr);
|
|
892
|
-
text-align: center;
|
|
893
|
-
gap: var(--gap);
|
|
894
|
-
|
|
895
|
-
.key_item {
|
|
896
|
-
border-radius: 3px;
|
|
897
|
-
font-weight: bold;
|
|
898
|
-
overflow: hidden;
|
|
899
|
-
user-select: none;
|
|
900
|
-
// @include key_color("key_color");
|
|
901
|
-
color: var(--key_color);
|
|
902
|
-
.key {
|
|
903
|
-
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
904
|
-
// @include key_background("key_background");
|
|
905
|
-
border-radius: var(--borra);
|
|
906
|
-
|
|
907
|
-
background: var(--keyboard_background);
|
|
908
|
-
height: var(--h);
|
|
814
|
+
.btns {
|
|
815
|
+
color: rgb(0, 123, 255);
|
|
909
816
|
display: flex;
|
|
910
|
-
justify-content:
|
|
817
|
+
justify-content: space-between;
|
|
911
818
|
align-items: center;
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
.keys {
|
|
923
|
-
display: flex;
|
|
924
|
-
gap: 4px;
|
|
925
|
-
height: var(--h);
|
|
926
|
-
display: flex;
|
|
927
|
-
justify-content: center;
|
|
928
|
-
align-items: center;
|
|
929
|
-
|
|
930
|
-
span {
|
|
931
|
-
flex: 1;
|
|
932
|
-
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
933
|
-
// @include key_background("key_background");
|
|
934
|
-
background: var(--key_background);
|
|
935
|
-
border-radius: 3px;
|
|
936
|
-
height: 100%;
|
|
937
|
-
display: flex;
|
|
938
|
-
justify-content: center;
|
|
939
|
-
align-items: center;
|
|
940
|
-
|
|
941
|
-
&:active {
|
|
942
|
-
// @include key_background("key_active_background");
|
|
943
|
-
background: var(--key_active_background);
|
|
944
|
-
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
945
|
-
transform: scale(0.99);
|
|
946
|
-
}
|
|
819
|
+
margin: 0.25rem 0;
|
|
820
|
+
font-size: 0.25rem;
|
|
821
|
+
|
|
822
|
+
> div {
|
|
823
|
+
height: 0.25rem;
|
|
824
|
+
span {
|
|
825
|
+
color: gainsboro;
|
|
826
|
+
transition: all 0.3s;
|
|
827
|
+
}
|
|
947
828
|
}
|
|
948
|
-
}
|
|
949
|
-
|
|
950
|
-
.del {
|
|
951
|
-
display: flex;
|
|
952
|
-
justify-content: center;
|
|
953
|
-
align-items: center;
|
|
954
|
-
height: var(--h);
|
|
955
829
|
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
height: 100%;
|
|
960
|
-
filter: var(--key_filter);
|
|
830
|
+
.ch {
|
|
831
|
+
font-size: 0.35rem;
|
|
832
|
+
color: rgb(0, 123, 255);
|
|
961
833
|
}
|
|
962
|
-
}
|
|
963
834
|
}
|
|
964
|
-
}
|
|
965
|
-
|
|
966
|
-
.text_list {
|
|
967
|
-
--symbolP: 0 5%;
|
|
968
|
-
}
|
|
969
|
-
.isSymbol {
|
|
970
|
-
--symbolP: 0;
|
|
971
|
-
}
|
|
972
|
-
.text_list {
|
|
973
|
-
display: grid;
|
|
974
|
-
grid-template-columns: repeat(1, 1fr);
|
|
975
|
-
text-align: center;
|
|
976
|
-
gap: var(--gap);
|
|
977
|
-
color: rgb(238, 238, 238);
|
|
978
|
-
|
|
979
|
-
.key_item_row {
|
|
980
|
-
display: flex;
|
|
981
|
-
gap: var(--gap);
|
|
982
|
-
width: 100%;
|
|
983
|
-
// border: 1px solid red;
|
|
984
|
-
// 全部
|
|
985
|
-
.key_item_column {
|
|
986
|
-
// flex: 1;
|
|
987
|
-
font-weight: bold;
|
|
988
|
-
color: var(--key_color);
|
|
989
|
-
overflow: hidden;
|
|
990
|
-
user-select: none;
|
|
991
|
-
box-sizing: border-box;
|
|
992
|
-
display: flex;
|
|
993
|
-
justify-content: center;
|
|
994
|
-
align-items: center;
|
|
995
|
-
height: var(--h);
|
|
996
|
-
& span,
|
|
997
|
-
& img {
|
|
998
|
-
pointer-events: none;
|
|
999
|
-
}
|
|
1000
|
-
.key {
|
|
1001
|
-
border-radius: var(--borra);
|
|
1002
|
-
display: flex;
|
|
1003
|
-
justify-content: center;
|
|
1004
|
-
align-items: center;
|
|
1005
|
-
height: 100%;
|
|
1006
|
-
width: 100%;
|
|
1007
|
-
font-size: var(--fontSize);
|
|
1008
|
-
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
1009
|
-
|
|
1010
|
-
background: var(--key_background);
|
|
1011
|
-
span {
|
|
1012
|
-
height: fit-content;
|
|
1013
|
-
line-height: 0.2rem;
|
|
1014
|
-
// border: 1px solid red;
|
|
1015
|
-
}
|
|
1016
835
|
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
1020
|
-
transform: scale(0.99);
|
|
1021
|
-
}
|
|
1022
|
-
}
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
// 单独第一行
|
|
1026
|
-
&:nth-child(1) {
|
|
1027
|
-
// justify-content: center;
|
|
1028
|
-
.key_item_column {
|
|
1029
|
-
// border: 1px solid red;
|
|
1030
|
-
flex: 1;
|
|
1031
|
-
flex-shrink: 0;
|
|
1032
|
-
.key {
|
|
1033
|
-
padding: 0;
|
|
1034
|
-
box-sizing: border-box;
|
|
1035
|
-
}
|
|
1036
|
-
// flex: 1;
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
836
|
+
.chinese {
|
|
837
|
+
// border: 1px solid red;
|
|
1039
838
|
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
display: flex;
|
|
1043
|
-
justify-content: center;
|
|
1044
|
-
padding: var(--symbolP);
|
|
1045
|
-
.key_item_column {
|
|
1046
|
-
flex-shrink: 0;
|
|
1047
|
-
flex: 1;
|
|
1048
|
-
.key {
|
|
1049
|
-
padding: 0;
|
|
839
|
+
.pinyin {
|
|
840
|
+
padding: 4px;
|
|
1050
841
|
box-sizing: border-box;
|
|
1051
|
-
|
|
842
|
+
// border: 1px solid red;
|
|
1052
843
|
}
|
|
1053
844
|
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
--flw: 8%; // 3 4 头尾
|
|
1058
|
-
--mflw: 80px;
|
|
1059
|
-
// 单独第3行
|
|
1060
|
-
&:nth-child(3) {
|
|
1061
|
-
justify-self: center;
|
|
1062
|
-
display: flex;
|
|
845
|
+
.wenzi {
|
|
846
|
+
position: relative;
|
|
847
|
+
height: 0.6rem;
|
|
1063
848
|
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
849
|
+
// border: 1px solid red;
|
|
850
|
+
background: var(--keyboard_background);
|
|
851
|
+
margin-bottom: 0.1rem;
|
|
852
|
+
.wenzi_box {
|
|
853
|
+
display: flex;
|
|
854
|
+
// flex-wrap: wrap;
|
|
855
|
+
gap: 10px;
|
|
856
|
+
padding: 5px;
|
|
857
|
+
overflow: auto;
|
|
858
|
+
&::-webkit-scrollbar {
|
|
859
|
+
display: none; /* 适用于 Chrome, Safari 和 Opera */
|
|
860
|
+
}
|
|
861
|
+
scrollbar-width: none; /* 适用于 Firefox */
|
|
862
|
+
position: absolute;
|
|
863
|
+
left: 0;
|
|
864
|
+
top: 0;
|
|
865
|
+
width: 98%;
|
|
866
|
+
height: 100%;
|
|
867
|
+
background: var(--keyboard_background);
|
|
868
|
+
z-index: 1;
|
|
869
|
+
transition: all 0.5s;
|
|
870
|
+
box-sizing: border-box;
|
|
871
|
+
|
|
872
|
+
span {
|
|
873
|
+
flex-shrink: 0;
|
|
874
|
+
padding: 0.04rem 0.08rem;
|
|
875
|
+
border-radius: 6px;
|
|
876
|
+
// border: 1px solid red;
|
|
877
|
+
height: fit-content;
|
|
878
|
+
|
|
879
|
+
&:active {
|
|
880
|
+
// @include key_background("key_active_background");
|
|
881
|
+
background: var(--key_active_background);
|
|
882
|
+
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
883
|
+
transform: scale(0.99);
|
|
884
|
+
}
|
|
885
|
+
}
|
|
1079
886
|
}
|
|
1080
887
|
|
|
1081
|
-
.
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
888
|
+
.wenzi_box_more {
|
|
889
|
+
// flex-wrap: wrap;
|
|
890
|
+
padding-right: 0.34rem;
|
|
891
|
+
box-sizing: border-box;
|
|
892
|
+
width: 102%;
|
|
893
|
+
left: -0.03rem;
|
|
894
|
+
// height: 31vh;
|
|
895
|
+
height: 4.5rem;
|
|
1085
896
|
|
|
1086
|
-
|
|
1087
|
-
filter: invert(100%);
|
|
1088
|
-
}
|
|
897
|
+
// border: 1px solid red;
|
|
1089
898
|
}
|
|
1090
|
-
}
|
|
1091
|
-
|
|
1092
|
-
&:first-child,
|
|
1093
|
-
&:last-child {
|
|
1094
|
-
width: var(--flw);
|
|
1095
|
-
min-width: var(--mflw);
|
|
1096
|
-
|
|
1097
|
-
img {
|
|
1098
|
-
transform: scale(0.8);
|
|
1099
|
-
height: 80%;
|
|
1100
|
-
// @include filter("key_filter");
|
|
1101
|
-
filter: var(--key_filter);
|
|
1102
|
-
}
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
&:not(&:first-child, &:last-child) {
|
|
1106
|
-
flex: 1;
|
|
1107
|
-
}
|
|
1108
899
|
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
900
|
+
.moreText {
|
|
901
|
+
position: absolute;
|
|
902
|
+
height: 0.55rem;
|
|
903
|
+
top: 0;
|
|
904
|
+
right: -5px;
|
|
905
|
+
z-index: 100;
|
|
906
|
+
padding: 0 0.05rem;
|
|
907
|
+
display: flex;
|
|
908
|
+
justify-content: center;
|
|
909
|
+
align-items: center;
|
|
910
|
+
border-radius: var(--borra);
|
|
911
|
+
// border: 1px solid red;
|
|
912
|
+
|
|
913
|
+
// @include key_background("keyboard_background");
|
|
914
|
+
background: var(--keyboard_background);
|
|
915
|
+
|
|
916
|
+
&:active {
|
|
917
|
+
// @include key_background("key_active_background");
|
|
918
|
+
background: var(--key_active_background);
|
|
919
|
+
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
920
|
+
transform: scale(0.99);
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.el-icon {
|
|
924
|
+
transition: all 0.4s ease;
|
|
925
|
+
}
|
|
926
|
+
}
|
|
1113
927
|
}
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
// 单独第4行
|
|
1117
|
-
&:nth-child(4) {
|
|
1118
|
-
grid-template-columns: 0.3fr 1fr 0.3fr;
|
|
928
|
+
}
|
|
1119
929
|
|
|
1120
|
-
|
|
1121
|
-
|
|
930
|
+
.number_list {
|
|
931
|
+
display: grid;
|
|
932
|
+
grid-template-columns: repeat(3, 1fr);
|
|
933
|
+
text-align: center;
|
|
934
|
+
gap: var(--gap);
|
|
1122
935
|
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
// border: 1px solid red;
|
|
1126
|
-
.key {
|
|
1127
|
-
padding: 0;
|
|
1128
|
-
box-sizing: border-box;
|
|
1129
|
-
font-size: 0.3rem;
|
|
936
|
+
.key_item {
|
|
937
|
+
border-radius: 3px;
|
|
1130
938
|
font-weight: bold;
|
|
939
|
+
overflow: hidden;
|
|
940
|
+
user-select: none;
|
|
941
|
+
// @include key_color("key_color");
|
|
942
|
+
color: var(--key_color);
|
|
943
|
+
.key {
|
|
944
|
+
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
945
|
+
// @include key_background("key_background");
|
|
946
|
+
border-radius: var(--borra);
|
|
947
|
+
|
|
948
|
+
background: var(--keyboard_background);
|
|
949
|
+
height: var(--h);
|
|
950
|
+
display: flex;
|
|
951
|
+
justify-content: center;
|
|
952
|
+
align-items: center;
|
|
953
|
+
// padding: 6px 0;
|
|
954
|
+
|
|
955
|
+
&:active {
|
|
956
|
+
// @include key_background("key_active_background");
|
|
957
|
+
background: var(--key_active_background);
|
|
958
|
+
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
959
|
+
transform: scale(0.99);
|
|
960
|
+
}
|
|
961
|
+
}
|
|
1131
962
|
|
|
1132
|
-
|
|
1133
|
-
|
|
963
|
+
.keys {
|
|
964
|
+
display: flex;
|
|
965
|
+
gap: 4px;
|
|
966
|
+
height: var(--h);
|
|
967
|
+
display: flex;
|
|
968
|
+
justify-content: center;
|
|
969
|
+
align-items: center;
|
|
970
|
+
|
|
971
|
+
span {
|
|
972
|
+
flex: 1;
|
|
973
|
+
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
974
|
+
// @include key_background("key_background");
|
|
975
|
+
background: var(--key_background);
|
|
976
|
+
border-radius: 3px;
|
|
977
|
+
height: 100%;
|
|
978
|
+
display: flex;
|
|
979
|
+
justify-content: center;
|
|
980
|
+
align-items: center;
|
|
981
|
+
|
|
982
|
+
&:active {
|
|
983
|
+
// @include key_background("key_active_background");
|
|
984
|
+
background: var(--key_active_background);
|
|
985
|
+
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
986
|
+
transform: scale(0.99);
|
|
987
|
+
}
|
|
988
|
+
}
|
|
1134
989
|
}
|
|
1135
|
-
}
|
|
1136
990
|
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
991
|
+
.del {
|
|
992
|
+
display: flex;
|
|
993
|
+
justify-content: center;
|
|
994
|
+
align-items: center;
|
|
995
|
+
height: var(--h);
|
|
996
|
+
|
|
997
|
+
img {
|
|
998
|
+
transform: scale(0.9);
|
|
999
|
+
// @include filter("key_filter");
|
|
1000
|
+
height: 100%;
|
|
1001
|
+
filter: var(--key_filter);
|
|
1002
|
+
}
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1142
1006
|
|
|
1007
|
+
.text_list {
|
|
1008
|
+
--symbolP: 0 5%;
|
|
1009
|
+
}
|
|
1010
|
+
.isSymbol {
|
|
1011
|
+
--symbolP: 0;
|
|
1012
|
+
}
|
|
1013
|
+
.text_list {
|
|
1014
|
+
display: grid;
|
|
1015
|
+
grid-template-columns: repeat(1, 1fr);
|
|
1016
|
+
text-align: center;
|
|
1017
|
+
gap: var(--gap);
|
|
1018
|
+
color: rgb(238, 238, 238);
|
|
1019
|
+
|
|
1020
|
+
.key_item_row {
|
|
1143
1021
|
display: flex;
|
|
1144
|
-
|
|
1145
|
-
|
|
1022
|
+
gap: var(--gap);
|
|
1023
|
+
width: 100%;
|
|
1024
|
+
// border: 1px solid red;
|
|
1025
|
+
// 全部
|
|
1026
|
+
.key_item_column {
|
|
1027
|
+
// flex: 1;
|
|
1028
|
+
font-weight: bold;
|
|
1029
|
+
color: var(--key_color);
|
|
1030
|
+
overflow: hidden;
|
|
1031
|
+
user-select: none;
|
|
1032
|
+
box-sizing: border-box;
|
|
1033
|
+
display: flex;
|
|
1034
|
+
justify-content: center;
|
|
1035
|
+
align-items: center;
|
|
1036
|
+
height: var(--h);
|
|
1037
|
+
& span,
|
|
1038
|
+
& img {
|
|
1039
|
+
pointer-events: none;
|
|
1040
|
+
}
|
|
1041
|
+
.key {
|
|
1042
|
+
border-radius: var(--borra);
|
|
1043
|
+
display: flex;
|
|
1044
|
+
justify-content: center;
|
|
1045
|
+
align-items: center;
|
|
1046
|
+
height: 100%;
|
|
1047
|
+
width: 100%;
|
|
1048
|
+
font-size: var(--fontSize);
|
|
1049
|
+
box-shadow: inset 0px 0px 2px 0px #8f9eae;
|
|
1050
|
+
|
|
1051
|
+
background: var(--key_background);
|
|
1052
|
+
span {
|
|
1053
|
+
height: fit-content;
|
|
1054
|
+
line-height: 0.2rem;
|
|
1055
|
+
// border: 1px solid red;
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
&:active {
|
|
1059
|
+
background: var(--key_active_background);
|
|
1060
|
+
box-shadow: inset 0px 0px 2px 2px #65708220;
|
|
1061
|
+
transform: scale(0.99);
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1146
1065
|
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1066
|
+
// 单独第一行
|
|
1067
|
+
&:nth-child(1) {
|
|
1068
|
+
// justify-content: center;
|
|
1069
|
+
.key_item_column {
|
|
1070
|
+
// border: 1px solid red;
|
|
1071
|
+
flex: 1;
|
|
1072
|
+
flex-shrink: 0;
|
|
1073
|
+
.key {
|
|
1074
|
+
padding: 0;
|
|
1075
|
+
box-sizing: border-box;
|
|
1076
|
+
}
|
|
1077
|
+
// flex: 1;
|
|
1078
|
+
}
|
|
1156
1079
|
}
|
|
1157
|
-
}
|
|
1158
1080
|
|
|
1159
|
-
|
|
1160
|
-
|
|
1081
|
+
// 单独第2行
|
|
1082
|
+
&:nth-child(2) {
|
|
1083
|
+
display: flex;
|
|
1084
|
+
justify-content: center;
|
|
1085
|
+
padding: var(--symbolP);
|
|
1086
|
+
.key_item_column {
|
|
1087
|
+
flex-shrink: 0;
|
|
1088
|
+
flex: 1;
|
|
1089
|
+
.key {
|
|
1090
|
+
padding: 0;
|
|
1091
|
+
box-sizing: border-box;
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
// grid-template-columns: repeat(9, 1fr);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
--flw: 8%; // 3 4 头尾
|
|
1099
|
+
--mflw: 50px;
|
|
1100
|
+
// 单独第3行
|
|
1101
|
+
&:nth-child(3) {
|
|
1102
|
+
justify-self: center;
|
|
1103
|
+
display: flex;
|
|
1104
|
+
|
|
1105
|
+
.key_item_column {
|
|
1106
|
+
// flex: 1;
|
|
1107
|
+
&:nth-child(1) {
|
|
1108
|
+
padding: 0;
|
|
1109
|
+
.key {
|
|
1110
|
+
box-sizing: border-box;
|
|
1111
|
+
display: flex;
|
|
1112
|
+
justify-content: center;
|
|
1113
|
+
align-items: center;
|
|
1114
|
+
font-size: 0.3rem;
|
|
1115
|
+
img {
|
|
1116
|
+
transform: scale(0.7);
|
|
1117
|
+
// @include filter("key_filter");
|
|
1118
|
+
filter: var(--key_filter);
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.toUpKeyCase {
|
|
1123
|
+
box-shadow: none;
|
|
1124
|
+
// border: 1px solid red;
|
|
1125
|
+
background: #c7c7c7;
|
|
1126
|
+
|
|
1127
|
+
img {
|
|
1128
|
+
filter: invert(100%);
|
|
1129
|
+
}
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
&:first-child,
|
|
1134
|
+
&:last-child {
|
|
1135
|
+
width: var(--flw);
|
|
1136
|
+
min-width: var(--mflw);
|
|
1137
|
+
|
|
1138
|
+
img {
|
|
1139
|
+
transform: scale(0.8);
|
|
1140
|
+
height: 80%;
|
|
1141
|
+
// @include filter("key_filter");
|
|
1142
|
+
filter: var(--key_filter);
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
&:not(&:first-child, &:last-child) {
|
|
1147
|
+
flex: 1;
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
.key {
|
|
1151
|
+
padding: 0;
|
|
1152
|
+
box-sizing: border-box;
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1161
1156
|
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1157
|
+
// 单独第4行
|
|
1158
|
+
&:nth-child(4) {
|
|
1159
|
+
grid-template-columns: 0.3fr 1fr 0.3fr;
|
|
1160
|
+
|
|
1161
|
+
.key_item_column {
|
|
1162
|
+
flex-shrink: 0;
|
|
1163
|
+
|
|
1164
|
+
// flex: 1;
|
|
1165
|
+
font-weight: 400;
|
|
1166
|
+
// border: 1px solid red;
|
|
1167
|
+
.key {
|
|
1168
|
+
padding: 0;
|
|
1169
|
+
box-sizing: border-box;
|
|
1170
|
+
font-size: 0.3rem;
|
|
1171
|
+
font-weight: bold;
|
|
1172
|
+
|
|
1173
|
+
img {
|
|
1174
|
+
height: 100%;
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
&:first-child,
|
|
1179
|
+
&:last-child {
|
|
1180
|
+
width: var(--flw);
|
|
1181
|
+
min-width: var(--mflw);
|
|
1182
|
+
// font-size: 14px;
|
|
1183
|
+
|
|
1184
|
+
display: flex;
|
|
1185
|
+
justify-content: center;
|
|
1186
|
+
align-items: center;
|
|
1187
|
+
|
|
1188
|
+
.key {
|
|
1189
|
+
display: flex;
|
|
1190
|
+
justify-content: center;
|
|
1191
|
+
align-items: center;
|
|
1192
|
+
|
|
1193
|
+
img {
|
|
1194
|
+
transform: scale(0.8);
|
|
1195
|
+
filter: var(--key_filter);
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
&:nth-child(2) {
|
|
1201
|
+
flex: 1;
|
|
1202
|
+
|
|
1203
|
+
img {
|
|
1204
|
+
transform: scale(0.8);
|
|
1205
|
+
filter: var(--key_filter);
|
|
1206
|
+
}
|
|
1207
|
+
}
|
|
1208
|
+
}
|
|
1165
1209
|
}
|
|
1166
|
-
}
|
|
1167
1210
|
}
|
|
1168
|
-
}
|
|
1169
1211
|
}
|
|
1170
|
-
}
|
|
1171
1212
|
}
|
|
1172
1213
|
|
|
1173
1214
|
// 显示动画
|
|
1174
1215
|
.keyboardcon {
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1216
|
+
transition: all 0.3s ease-in-out;
|
|
1217
|
+
transform: translateY(100%);
|
|
1218
|
+
opacity: 0;
|
|
1178
1219
|
}
|
|
1179
1220
|
|
|
1180
1221
|
.show {
|
|
1181
|
-
|
|
1182
|
-
|
|
1222
|
+
transform: translateY(0%);
|
|
1223
|
+
opacity: 1;
|
|
1183
1224
|
}
|
|
1184
1225
|
</style>
|