├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── keyboard
    │   │   ├── index.js
    │   │   ├── index.worker.js
    │   │   ├── key.js
    │   │   ├── keyboardIndex.vue
    │   │   └── package.json
    ├── data.js
    ├── dict
    │   ├── address.json
    │   ├── baseDict.json
    │   └── chowder.json
    └── main.js
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | *.rar
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | *.tgz
26 | *.rar
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-virtual-keyboard
 2 | 
 3 | 演示(词库较大请耐心等待) https://monaizi.github.io/vue-virtual-keyboard/
 4 | 
 5 | ## 安装
 6 | ```bash
 7 | yarn add vue-virtual-keyboard-cn
 8 | 
 9 | npm install vue-virtual-keyboard-cn
10 | 
11 | ```
12 | ## 使用
13 | ### 局部使用
14 | ```
15 | import keyboard from "vue-virtual-keyboard-cn/keyboardIndex.vue" 
16 | ```
17 | ### 全局注册
18 | ```
19 | import keyboard from "vue-virtual-keyboard-cn"
20 | Vue.use(keyboard) 然后使用 <vue-virtual-keyboard-cn></vue-virtual-keyboard-cn>;
21 | ```
22 | <br/>
23 | 
24 | ### 要想让键盘自动绑定上，input或textarea必须设置keyboard="true"属性
25 | data-mode 默认不传是是中文，不传词库默认就是小写英文
26 | ### input属性
27 | 
28 | |  属性   | 说明  | 值 | 备注 
29 | |  ----  | ----  | ---- | ---- |
30 | | data-mode  | 键盘类型 | cn | 中文
31 | | data-mode  | 键盘类型 | en_cap | 英文大写
32 | | data-mode  | 键盘类型 | en | 英文小写
33 | | data-mode  | 键盘类型 | num | 数字键盘
34 | | data-mode  | 键盘类型 | biaodian | 符号键盘
35 | | data-mode  | 键盘类型 | password | 密码键盘
36 | | data-mode  | 键盘类型 | id_card | 身份证键盘
37 | | data-mode  | 键盘类型 | di_git | 带小数点的数字键盘
38 | 
39 | ### 词库在本项目的src/dict目录下
40 | ### 引用词库示例
41 | 比如我有个词库在 src/dict目录下：
42 | ```正确的引用<keyboard :singleDict="'dict/baseDict.json"'"></keyboard> ```
43 | 
44 | !!! 注意不要把多词汇词库传递给单词汇词库的属性
45 | <br/>
46 | ### 词库介绍
47 | |  属性   | 说明  | 备注 
48 | |  ----  | ----  | ---- |
49 | | baseDict.json  | 单词汇词库 | 基础词库
50 | | address.json  | 多词汇词库 | 全国省市区地址(主要)和一些短词句词库
51 | | chowder.json  | 多词汇词库 | 日常生活,成语,人名,全国省市区地址词库
52 | <br/>
53 | 
54 | ### 组件属性
55 | |  属性   | 说明  | 值 | 备注 
56 | |  ----  | ----  | ---- | ---- |
57 | | singleDict  | 单词汇词库 |  baseDict.json | 要想使用汉字拼写功能此项必填
58 | | manyDict  | 多词汇词库 |  请看词库介绍 | 可以根据不同场景使用不同的词库
59 | | maxQuantify  | 显示选词个数 | Number | 默认 10
60 | | showKeyboard  | 手动显示隐藏键盘 | true/false | 默认不需要自己手动传值
61 | | inputEvent  | 手动传入可编辑的对象 | element | 用来处理可编辑元素
62 | | blurHide  | 失去焦点是否自动隐藏键盘 | true/false | 
63 | | transitionTime  | 键盘动画过渡时间 | String | 默认 '0.3s'
64 | <br/>
65 | 
66 | ### 组件事件
67 | |  事件   | 说明  | 值 | 备注 
68 | |  ----  | ----  | ---- | ---- |
69 | | clickNumber  | 点击数字符号触发 | key | 
70 | | clickKey  | 点击字母空格触发 | key | 
71 | | del  | 点击删除触发 | key | 如果是中文，会返回当前的拼音
72 | | changeMode  | 键盘类型改变时触发 | data-mode | 
73 | | changeShow  | 键盘显示和隐藏触发 | true/false | 
74 | | initResult  | 词库加载事件 | success/fail | 成功和错误都会返回对应的结果
75 | | inputBindKeyboard  | 重新给input绑定键盘 |  | 使用：调用组件里面的inputBindKeyboard方法，例子：this.$refs.keyboard.inputBindKeyboard();
76 | | contenteditableInput  | 更改可编辑元素是触发的事件 | value | 
77 | 
78 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-virtual-keyboard-cn",
 3 |   "author": "MoNaiZi",
 4 |   "version": "1.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^3.8.3",
13 |     "element-ui": "^2.15.10",
14 |     "node-sass": "7.0.3",
15 |     "sass-loader": "6.0.6",
16 |     "style-loader": "0.21.0",
17 |     "vue": "^2.6.14",
18 |     "vue-virtual-keyboard-cn": "^1.2.6",
19 |     "worker-loader": "^3.0.8"
20 |   },
21 |   "devDependencies": {
22 |     "@babel/core": "^7.12.16",
23 |     "@babel/eslint-parser": "^7.12.16",
24 |     "@vue/cli-plugin-babel": "~5.0.0",
25 |     "@vue/cli-plugin-eslint": "~5.0.0",
26 |     "@vue/cli-service": "~5.0.0",
27 |     "eslint": "^7.32.0",
28 |     "eslint-plugin-vue": "^8.0.3",
29 |     "vue-template-compiler": "^2.6.14"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true,
35 |       "jest": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "@babel/eslint-parser"
43 |     },
44 |     "rules": {
45 |       "no-debugger": "off",
46 |       "no-console": "off"
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MoNaiZi/vue-virtual-keyboard/276ba30c353e038541bfc64857016ba54dbbfe91/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <el-input
  4 |       v-model="value2"
  5 |       placeholder="请输入或选择"
  6 |       keyboard="true"
  7 |       data-mode="cn"
  8 |       @focus="focusInput"
  9 |     ></el-input>
 10 |     <el-select
 11 |       v-model="value2"
 12 |       ref="select"
 13 |       placeholder="请选择"
 14 |       class="abcSelect"
 15 |     >
 16 |       <el-option
 17 |         v-for="item in options"
 18 |         :key="item.value"
 19 |         :label="item.label"
 20 |         :value="item.value"
 21 |       >
 22 |       </el-option>
 23 |     </el-select>
 24 |     <el-select v-model="value2" ref="select" placeholder="请选择2">
 25 |       <el-option
 26 |         v-for="item in options"
 27 |         :key="item.value"
 28 |         :label="item.label"
 29 |         :value="item.value"
 30 |       >
 31 |       </el-option>
 32 |     </el-select>
 33 |     <div>
 34 |       <div>
 35 |         中文：<input
 36 |           id="abc"
 37 |           style="width: 400px; height: 25px; font-size: 20px"
 38 |           type="text"
 39 |           v-model="value"
 40 |           keyboard="true"
 41 |           @click="stopDefault"
 42 |         />
 43 |       </div>
 44 |       <div>
 45 |         英文大写：<input type="text" data-mode="en_cap" keyboard="true" />
 46 |       </div>
 47 |       <div>英文小写：<input type="text" data-mode="en" keyboard="true" /></div>
 48 |       <div>数字：<input type="text" data-mode="num" keyboard="true" /></div>
 49 |       <div>
 50 |         身份证：<input type="text" data-mode="id_card" keyboard="true" />
 51 |       </div>
 52 |       <div>浮点：<input type="text" data-mode="di_git" keyboard="true" /></div>
 53 |       <div>
 54 |         符号：<input type="text" data-mode="biaodian" keyboard="true" />
 55 |       </div>
 56 |       <div>
 57 |         密码键盘：<input type="text" data-mode="password" keyboard="true" />
 58 |       </div>
 59 | 
 60 |       自动绑定到textarea<textarea type="text" keyboard="true"></textarea>
 61 |       <div>
 62 |         手动显示输入法<textarea
 63 |           type="text"
 64 |           @focus="focusInput2"
 65 |           @blur="blurInput2"
 66 |         ></textarea>
 67 |       </div>
 68 |       <div>
 69 |         <p contenteditable id="elem" @click="clickDiv" @blur="blurInput2">
 70 |           div手动显示输入法： 我是可以被编辑的div
 71 |         </p>
 72 |       </div>
 73 |       <div>不需要输入法<input type="text" /></div>
 74 |       <div style="height: 400px"></div>
 75 |       <!-- <vue-virtual-keyboard-cn
 76 |         :transitionTime="'0.3s'"
 77 |         :maxQuantify="10"
 78 |         :showKeyboard="showKeyboard"
 79 |         @clickKey="clickKey"
 80 |         float
 81 |         :inputEvent="currentInput"
 82 |         @initResult="initFulfil"
 83 |         :manyDict="manyDict"
 84 |         :singleDict="singleDict"
 85 |         @keyboardTips="keyboardTips"
 86 |         @clickNumber="clickNumber"
 87 |         :blurHide="false"
 88 |       ></vue-virtual-keyboard-cn> -->
 89 |       <keyboard
 90 |         :transitionTime="'0.5s'"
 91 |         :maxQuantify="10"
 92 |         :showKeyboard="showKeyboard"
 93 |         @clickKey="clickKey"
 94 |         float
 95 |         :inputEvent="currentInput"
 96 |         @initResult="initFulfil"
 97 |         :manyDict="manyDict"
 98 |         :singleDict="singleDict"
 99 |         @keyboardTips="keyboardTips"
100 |         @clickNumber="clickNumber"
101 |         :blurHide="false"
102 |       ></keyboard>
103 |     </div>
104 |   </div>
105 | </template>
106 | 
107 | <script>
108 | </script>
109 | <script>
110 | import keyboard from "./components/keyboard/keyboardIndex.vue";
111 | // import keyboard from "vue-virtual-keyboard-cn/keyboardIndex.vue";
112 | export default {
113 |   name: "App",
114 |   components: {
115 |     keyboard,
116 |   },
117 |   methods: {
118 |     clickNumber(key) {
119 |       console.log("clickNumber", key);
120 |     },
121 |     keyboardTips(txt) {
122 |       console.log("tips", txt);
123 |     },
124 |     initFulfil() {
125 |       this.loading.close();
126 |     },
127 |     clickDiv(e) {
128 |       console.log("点击", e.target.getAttribute("contenteditable"));
129 |       e.mode = "en_cap";
130 |       this.currentInput = e;
131 |       this.showKeyboard = true;
132 |     },
133 |     focusInput2(e) {
134 |       console.log("聚焦", e.target.getAttribute("contenteditable"));
135 |       e.mode = "en_cap";
136 |       this.currentInput = e;
137 |       this.showKeyboard = true;
138 |     },
139 |     blurInput2() {
140 |       // console.log("失焦", e);
141 |       this.currentInput = null;
142 |       this.showKeyboard = false;
143 |     },
144 |     stopDefault() {},
145 |     clickKey(key) {
146 |       console.log("key", key);
147 |     },
148 |     bodyStopMousedown(e) {
149 |       // debugger;
150 |       // e.stopPropagation();
151 |       e.stopImmediatePropagation();
152 |     },
153 |     cancelOrRecoveryBodyMousedown(typeText) {
154 |       const body = document.querySelector("body");
155 |       let options = { capture: false };
156 |       if (typeText === "cancel") {
157 |         body.addEventListener("mousedown", this.bodyStopMousedown, options);
158 |       } else {
159 |         body.removeEventListener("mousedown", this.bodyStopMousedown, options);
160 |       }
161 |     },
162 |     focusInput() {
163 |       setTimeout(() => {
164 |         this.select.visible = true;
165 |       }, 300);
166 |     },
167 |   },
168 |   mounted() {
169 |     if (window.screen.width < 700) {
170 |       // 当前设备是移动设备
171 |       const inputAll = document.querySelectorAll("[keyboard='true']");
172 |       for (let item of inputAll) {
173 |         item.setAttribute("inputmode", "none");
174 |       }
175 |     }
176 |     new Error("我是错误");
177 |     this.loading = this.$loading({
178 |       lock: true,
179 |       text: "词库加载中。。",
180 |       spinner: "el-icon-loading",
181 |       background: "rgba(0, 0, 0, 0.7)",
182 |     });
183 |     let elem = document.querySelector("#elem");
184 |     let observer = new MutationObserver((mutationRecords) => {
185 |       console.log(mutationRecords); // console.log(the changes)
186 |     });
187 | 
188 |     // 观察除了特性之外的所有变动
189 |     observer.observe(elem, {
190 |       childList: true, // 观察直接子节点
191 |       subtree: true, // 及其更低的后代节点
192 |       characterDataOldValue: true, // 将旧的数据传递给回调
193 |     });
194 | 
195 |     this.cancelOrRecoveryBodyMousedown("cancel");
196 |     this.select = this.$refs.select;
197 |   },
198 |   data() {
199 |     return {
200 |       manyDict: "dict/chowder.json",
201 |       singleDict: "dict/baseDict.json",
202 |       currentInput: "",
203 |       showKeyboard: false,
204 |       value: "",
205 |       options: [
206 |         {
207 |           value: "选项1",
208 |           label: "黄金糕",
209 |         },
210 |         {
211 |           value: "选项2",
212 |           label: "双皮奶",
213 |         },
214 |         {
215 |           value: "选项3",
216 |           label: "蚵仔煎",
217 |         },
218 |         {
219 |           value: "选项4",
220 |           label: "龙须面",
221 |         },
222 |         {
223 |           value: "选项5",
224 |           label: "北京烤鸭",
225 |         },
226 |       ],
227 |       value2: "",
228 |     };
229 |   },
230 | };
231 | </script>
232 | 
233 | <style >
234 | .keyDown {
235 |   background: #2c3e50;
236 | }
237 | body {
238 |   margin: 0px;
239 | }
240 | #app {
241 |   font-family: Avenir, Helvetica, Arial, sans-serif;
242 |   -webkit-font-smoothing: antialiased;
243 |   -moz-osx-font-smoothing: grayscale;
244 |   text-align: center;
245 |   color: #2c3e50;
246 |   margin-top: 60px;
247 | }
248 | </style>
249 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MoNaiZi/vue-virtual-keyboard/276ba30c353e038541bfc64857016ba54dbbfe91/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/keyboard/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import keyboardIndex from './keyboardIndex.vue'
 3 | 
 4 | const keyboard = {
 5 |     install(Vue) {
 6 |         Vue.component('vue-virtual-keyboard-cn', keyboardIndex)
 7 |     }
 8 | }
 9 | 
10 | if (typeof window !== 'undefined' && window.Vue) {
11 |     window.Vue.use(keyboard);
12 | }
13 | 
14 | export default keyboard


--------------------------------------------------------------------------------
/src/components/keyboard/index.worker.js:
--------------------------------------------------------------------------------
  1 | // const obj = self.importScripts("/vocabulary.js")
  2 | 
  3 | self.addEventListener('message', (e) => {
  4 |     // console.log('子线程', e)
  5 | 
  6 |     const { method, dataKey } = e.data
  7 | 
  8 |     if (method === 'init') {
  9 |         self[dataKey] = Object.freeze(e.data.data)
 10 |         self.dataKey = dataKey
 11 |     }
 12 |     if (method === 'setCn_input') {
 13 |         setCn_input(e)
 14 |     }
 15 |     if (method === 'search') {
 16 |         console.time("searchDict");
 17 |         let { key } = e.data
 18 |         const doubleSpell = self.doubleSpell || {}
 19 | 
 20 |         let cn_input = key
 21 |         let keys = cn_input.split("'")
 22 |         const dict = doubleSpell[cn_input.charAt(0)]
 23 |         if (!dict) return
 24 | 
 25 |         if (["an"].includes(keys[keys.length - 1])) {
 26 |             let tempStr = keys[keys.length - 2];
 27 |             if (["n"].includes(tempStr.charAt(tempStr.length - 1))) {
 28 |                 let newTempStr = tempStr.slice(0, tempStr.length - 1);
 29 |                 keys = [
 30 |                     newTempStr,
 31 |                     tempStr.slice(tempStr.length - 1) + keys[keys.length - 1],
 32 |                 ];
 33 |                 cn_input = keys.join("'");
 34 |             }
 35 |         }
 36 | 
 37 |         let keyResult = Object.keys(dict).filter((key) => {
 38 |             const keys = key.split("'");
 39 |             const cn_inputList = cn_input.split("'");
 40 |             const isLen = cn_inputList.length === keys.length;
 41 |             if (!isLen) return
 42 |             let result = true
 43 |             for (let i = 0; i < keys.length; i++) {
 44 |                 if (keys[i].charAt(0) != cn_inputList[i].charAt(0)) {
 45 |                     result = false
 46 |                 } else {
 47 |                     const keyItemList = keys[i].split('')
 48 |                     const strList = cn_inputList[i].split('')
 49 |                     for (let j = 0; j < strList.length; j++) {
 50 |                         if (!strList[j]) break
 51 |                         if (keyItemList[j] != strList[j]) {
 52 |                             result = false
 53 |                         }
 54 |                     }
 55 |                 }
 56 |             }
 57 |             if (result && isLen) {
 58 |                 return dict[key];
 59 |             }
 60 |         });
 61 | 
 62 | 
 63 |         let strList = [];
 64 |         let singleDictList = []
 65 |         const singleDict = self.dict
 66 |         for (let key of keyResult) {
 67 |             let keyList = key.split("'")
 68 |             // console.log('dict[key]', dict[key])
 69 |             strList.push(dict[key].split(","));
 70 |             for (let item of keyList) {
 71 |                 // console.log('singleDict[item]', singleDict[item])
 72 |                 if (singleDict[item]) {
 73 |                     singleDictList.push(singleDict[item].split(""));
 74 |                 }
 75 | 
 76 |             }
 77 |         }
 78 | 
 79 |         singleDictList = Array.from(new Set(singleDictList.flat(2)))
 80 |         strList = strList
 81 |             .flat(2)
 82 |             .sort((a, b) => {
 83 |                 if (b.length > a.length) return -1;
 84 |             })
 85 |             .reverse();
 86 |         const result = strList.concat(singleDictList)
 87 |         console.timeEnd("searchDict");
 88 |         self.postMessage({ method: 'search', data: result, cn_input });
 89 |     }
 90 | 
 91 | }, false);
 92 | 
 93 | const setCn_input = function (e) {
 94 |     let { cn_input, text } = e.data
 95 |     const singleDict = self.dict
 96 |     let itemList = []
 97 |     for (let key in singleDict) {
 98 |         let value = singleDict[key]
 99 |         let valueList = value.split('')
100 |         let item = valueList.find(item => item === text)
101 |         if (item) {
102 |             itemList.push(key)
103 |         }
104 |     }
105 |     let str = ''
106 |     const cn_inputList = cn_input.split("'")
107 |     for (let i = 0; i < cn_inputList.length; i++) {
108 |         let item = cn_inputList[i]
109 |         for (let key of itemList) {
110 |             let list = key.split('')
111 |             for (let k = 0; k < list.length; k++) {
112 |                 if (key.charAt(k) === item.charAt(k)) {
113 |                     str = item
114 |                 }
115 |             }
116 |         }
117 |     }
118 |     let result = cn_inputList.filter(item => item != str).join("'")
119 | 
120 |     self.postMessage({ method: 'setCn_input', cn_input: result });
121 | }
122 | 
123 | // const findInitialCn = function (cn_input, data) {
124 | //     console.time("for2");
125 | //     let strList = [];
126 | //     let count = 0
127 | //     Object.keys(data).filter((key) => {
128 | //         const keys = key.split("'");
129 | //         let i = 0;
130 | //         const bool = keys.every((item, index) => {
131 | //             ++count
132 | //             if (index === 0) {
133 | //                 if (item.charAt(0) === cn_input.charAt(0)) {
134 | //                     return true;
135 | //                 }
136 | 
137 | //             } else {
138 | //                 i += 2;
139 | //                 if (item.charAt() === cn_input.charAt(i)) return true;
140 | //             }
141 | //         });
142 | //         if (bool) {
143 | //             strList.push(data[key]);
144 | //         }
145 | 
146 | //     });
147 | //     console.log('count', count, strList)
148 | //     console.timeEnd("for2");
149 | //     let keys = cn_input.split("'")
150 | //     strList = strList.filter(item => item.length === keys.length);
151 | 
152 | //     return strList
153 | 
154 | // }


--------------------------------------------------------------------------------
/src/components/keyboard/key.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   number: ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'X', '0', '.'],
3 |   biaodian: ['@', '#', '$', '￥', '%', '*', '(', ')', '/', '.', '-', ','],
4 |   letter: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'n', 'm'],
5 |   cap_letter: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M']
6 | }


--------------------------------------------------------------------------------
/src/components/keyboard/keyboardIndex.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <transition :name="!transitionTime ? '' : 'keyboardTransition'">
   3 |     <div
   4 |       v-show="show"
   5 |       :class="['my-keyboard', equipmentType]"
   6 |       @mousedown="mousedown"
   7 |       :style="{ transition: `all ${transitionTime}` }"
   8 |     >
   9 |       <div
  10 |         v-if="mode === 'cn' && !showDiction && cn_input?.length"
  11 |         class="pinyin"
  12 |       >
  13 |         <div>
  14 |           <span>{{ cn_input }}</span>
  15 |         </div>
  16 |       </div>
  17 |       <div
  18 |         v-if="mode === 'cn' && !showDiction && cn_input?.length"
  19 |         class="select-list"
  20 |         :style="{ height: cut_cn_list.length ? '' : '40px' }"
  21 |       >
  22 |         <div>
  23 |           <div class="item_main">
  24 |             <span
  25 |               class="select-text"
  26 |               v-for="(text, index) in cut_cn_list"
  27 |               :key="index"
  28 |               @click="clickCN($event, text)"
  29 |               >{{ index + 1 + "." + text }}</span
  30 |             >
  31 |           </div>
  32 | 
  33 |           <div class="page" v-if="equipmentType === 'pc'">
  34 |             <p :style="previousStyleFn" @[keyEvent]="previous_page">
  35 |               <fullTriangle></fullTriangle>
  36 |             </p>
  37 |             <p :style="nextPageStyleFn" class="next" @[keyEvent]="next_page">
  38 |               <fullTriangle></fullTriangle>
  39 |             </p>
  40 |           </div>
  41 |           <div class="page" v-else>
  42 |             <p class="next" @[keyEvent]="isShowDiction">
  43 |               <fullTriangle></fullTriangle>
  44 |             </p>
  45 |           </div>
  46 |         </div>
  47 |       </div>
  48 |       <!-- 12键盘 -->
  49 |       <div
  50 |         v-if="['id_card', 'di_git', 'biaodian', 'num'].includes(mode)"
  51 |         :class="[
  52 |           'main-keyboard',
  53 |           mode != 'biaodian' && old_mode === '' ? 'no_del_box' : '',
  54 |         ]"
  55 |       >
  56 |         <div :class="['number-box', mode]">
  57 |           <div
  58 |             v-if="mode != 'biaodian' && old_mode === ''"
  59 |             @click="HideKey"
  60 |             class="hide12key"
  61 |           >
  62 |             <svg
  63 |               width="40"
  64 |               height="40"
  65 |               viewBox="0 0 48 48"
  66 |               fill="none"
  67 |               xmlns="http://www.w3.org/2000/svg"
  68 |             >
  69 |               <path
  70 |                 d="M36 18L24 30L12 18"
  71 |                 stroke="rgb(141 141 141)"
  72 |                 stroke-width="4"
  73 |                 stroke-linecap="round"
  74 |                 stroke-linejoin="round"
  75 |               />
  76 |             </svg>
  77 |           </div>
  78 |           <template v-for="(key, index) in number_keys2">
  79 |             <span
  80 |               v-if="
  81 |                 (index != number_keys2.length - 1 ||
  82 |                   old_mode != '' ||
  83 |                   mode === 'biaodian') &&
  84 |                 key != ''
  85 |               "
  86 |               :key="'key' + index"
  87 |               class="key number"
  88 |               @[keyEvent]="clickNumber($event, key)"
  89 |               :class="{ disabled_key: key === '' ? true : false }"
  90 |               >{{ key }}</span
  91 |             >
  92 |           </template>
  93 |           <keyDel v-if="mode != 'biaodian' && old_mode === ''"></keyDel>
  94 |         </div>
  95 | 
  96 |         <div class="del-box" v-if="mode === 'biaodian' || old_mode != ''">
  97 |           <keyDel></keyDel>
  98 |           <span class="key number" @[keyEvent]="cn_change('cn')">
  99 |             <template v-if="mainMode != 'noCn'">中/</template>英</span
 100 |           >
 101 |           <span
 102 |             class="key key_hide number"
 103 |             style="margin-left: 0px"
 104 |             @[keyEvent]="HideKey"
 105 |           >
 106 |             <svg
 107 |               class="jp"
 108 |               viewBox="0 0 1024 1024"
 109 |               xmlns="http://www.w3.org/2000/svg"
 110 |               v-if="equipmentType === 'pc'"
 111 |             >
 112 |               <path
 113 |                 d="M390.94044445 560.84859262h97.39377777V463.45481485H390.94044445v97.39377777zM560.24177778 317.81925929H463.75822222v97.39377778h97.39377778V317.81925929z m-145.63555556 0H318.12266667v97.39377778h97.39377778V317.81925929z m291.27111111 0H609.39377778v97.39377778h97.39377777V317.81925929zM536.576 560.84859262h97.39377778V463.45481485H536.576v97.39377777zM268.97066667 317.81925929H172.48711111v97.39377778h97.39377778V317.81925929z m486.05866666 97.39377778h97.39377778V317.81925929H755.02933333v97.39377778z m145.63555556-243.02933334H123.33511111c-53.70311111 0-97.39377778 43.69066667-97.39377778 97.39377778V754.72592595c0 53.70311111 43.69066667 97.39377778 97.39377778 97.39377778h776.41955556c53.70311111 0 97.39377778-43.69066667 97.39377778-97.39377778V269.57748151c0-53.70311111-43.69066667-97.39377778-96.48355556-97.39377778z m48.24177778 582.54222222c0 26.39644445-21.84533333 48.24177778-48.24177778 48.24177778H123.33511111c-26.39644445 0-48.24177778-21.84533333-48.24177778-48.24177778V269.57748151c0-26.39644445 21.84533333-48.24177778 48.24177778-48.24177778h776.41955556c26.39644445 0 48.24177778 21.84533333 48.24177778 48.24177778l0.91022222 485.14844444zM682.21155555 560.84859262h97.39377778V463.45481485H682.21155555v97.39377777z m-388.66488888 145.63555556h436.90666666V609.0903704H293.54666667v97.39377778zM341.78844445 463.45481485H245.30488889v97.39377777h97.39377778V463.45481485z"
 114 |               />
 115 |             </svg>
 116 |             <span>
 117 |               {{ equipmentType === "pc" ? "隐藏" : "隐藏键盘" }}
 118 |               <template v-if="equipmentType === 'pc'">
 119 |                 <br />
 120 |                 <i style="display: block; transform: scaleX(2)">v</i>
 121 |               </template>
 122 |             </span>
 123 |           </span>
 124 |           <span class="key number" @[keyEvent]="Fanhui()">返回</span>
 125 |         </div>
 126 |       </div>
 127 |       <!-- 26键盘 -->
 128 |       <div
 129 |         v-if="['cn', 'en_cap', 'en', 'password'].includes(mode) && !showDiction"
 130 |         class="main-keyboard"
 131 |       >
 132 |         <template v-if="equipmentType === 'pc'">
 133 |           <span
 134 |             class="key"
 135 |             v-for="(key, index) in number_keys"
 136 |             :key="index + 50"
 137 |             @[keyEvent]="clickNumber($event, key)"
 138 |             >{{ key }}</span
 139 |           >
 140 |           <br />
 141 |         </template>
 142 |         <span
 143 |           class="key letter"
 144 |           v-for="(key, index) in letter_keys.slice(0, 10)"
 145 |           :key="index + 11"
 146 |           @[keyEvent]="clickKey($event, key)"
 147 |           >{{ key }}</span
 148 |         >
 149 |         <br />
 150 |         <span
 151 |           class="key letter"
 152 |           v-for="(key, index) in letter_keys.slice(10, 19)"
 153 |           :key="index + 21"
 154 |           @[keyEvent]="clickKey($event, key)"
 155 |           >{{ key }}</span
 156 |         >
 157 |         <br />
 158 | 
 159 |         <span
 160 |           v-if="mode === 'cn' && mode != 'password'"
 161 |           @[keyEvent]="cn_change('en')"
 162 |           class="key blue"
 163 |         >
 164 |           中 /
 165 |           <i class="blue_default">英</i>
 166 |         </span>
 167 |         <span v-else @[keyEvent]="cn_change('cn')" class="key blue">
 168 |           英<template v-if="mainMode != 'noCn'">
 169 |             /
 170 |             <i class="blue_default">中</i>
 171 |           </template>
 172 |         </span>
 173 | 
 174 |         <span
 175 |           class="key letter"
 176 |           v-for="(key, index) in letter_keys.slice(19, 26)"
 177 |           :key="index + 31"
 178 |           @[keyEvent]="clickKey($event, key)"
 179 |           >{{ key }}</span
 180 |         >
 181 |         <keyDel></keyDel>
 182 |         <br />
 183 |         <span
 184 |           class="key key_hide"
 185 |           style="width: 140px; margin-left: 10px"
 186 |           @[keyEvent]="HideKey"
 187 |         >
 188 |           <svg
 189 |             class="jp"
 190 |             viewBox="0 0 1024 1024"
 191 |             xmlns="http://www.w3.org/2000/svg"
 192 |             v-if="equipmentType === 'pc'"
 193 |           >
 194 |             <path
 195 |               d="M390.94044445 560.84859262h97.39377777V463.45481485H390.94044445v97.39377777zM560.24177778 317.81925929H463.75822222v97.39377778h97.39377778V317.81925929z m-145.63555556 0H318.12266667v97.39377778h97.39377778V317.81925929z m291.27111111 0H609.39377778v97.39377778h97.39377777V317.81925929zM536.576 560.84859262h97.39377778V463.45481485H536.576v97.39377777zM268.97066667 317.81925929H172.48711111v97.39377778h97.39377778V317.81925929z m486.05866666 97.39377778h97.39377778V317.81925929H755.02933333v97.39377778z m145.63555556-243.02933334H123.33511111c-53.70311111 0-97.39377778 43.69066667-97.39377778 97.39377778V754.72592595c0 53.70311111 43.69066667 97.39377778 97.39377778 97.39377778h776.41955556c53.70311111 0 97.39377778-43.69066667 97.39377778-97.39377778V269.57748151c0-53.70311111-43.69066667-97.39377778-96.48355556-97.39377778z m48.24177778 582.54222222c0 26.39644445-21.84533333 48.24177778-48.24177778 48.24177778H123.33511111c-26.39644445 0-48.24177778-21.84533333-48.24177778-48.24177778V269.57748151c0-26.39644445 21.84533333-48.24177778 48.24177778-48.24177778h776.41955556c26.39644445 0 48.24177778 21.84533333 48.24177778 48.24177778l0.91022222 485.14844444zM682.21155555 560.84859262h97.39377778V463.45481485H682.21155555v97.39377777z m-388.66488888 145.63555556h436.90666666V609.0903704H293.54666667v97.39377778zM341.78844445 463.45481485H245.30488889v97.39377777h97.39377778V463.45481485z"
 196 |             />
 197 |           </svg>
 198 |           <span>
 199 |             {{ equipmentType === "pc" ? "隐藏" : "隐藏键盘" }}
 200 |             <template v-if="equipmentType === 'pc'">
 201 |               <br />
 202 |               <i style="display: block; transform: scaleX(2)">v</i>
 203 |             </template>
 204 |           </span>
 205 |         </span>
 206 | 
 207 |         <span
 208 |           v-if="mode === 'en_cap'"
 209 |           class="key blue case"
 210 |           @[keyEvent]="cap_change()"
 211 |         >
 212 |           {{ equipmentType === "pc" ? "已锁定大写" : "大写" }}
 213 |         </span>
 214 |         <span v-else class="key blue case" @[keyEvent]="cap_change()">{{
 215 |           equipmentType === "pc" ? "切换大写" : "小写"
 216 |         }}</span>
 217 |         <span class="key space" @[keyEvent]="clickKey($event, ' ', true)"
 218 |           >空格</span
 219 |         >
 220 |         <span @[keyEvent]="() => (this.mode = 'biaodian')" class="key blue"
 221 |           >符号</span
 222 |         >
 223 |         <span @[keyEvent]="() => (this.mode = 'num')" class="key blue"
 224 |           >数字</span
 225 |         >
 226 |       </div>
 227 |       <!--选词板-->
 228 |       <div v-if="mode === 'cn' && showDiction" class="main-keyboard">
 229 |         <div class="number-box select_cn">
 230 |           <div class="select_cn_main">
 231 |             <span
 232 |               class="item"
 233 |               :key="index"
 234 |               v-for="(item, index) in cn_list_str"
 235 |               @click="clickCN($event, item)"
 236 |             >
 237 |               {{ item }}
 238 |             </span>
 239 |           </div>
 240 |         </div>
 241 |         <div class="del-box">
 242 |           <keyDel></keyDel>
 243 |           <span
 244 |             class="key number blue"
 245 |             @[keyEvent]="Fanhui()"
 246 |             style="font-size: 36px"
 247 |             >返回</span
 248 |           >
 249 |           <span
 250 |             class="key key_hide number"
 251 |             style="margin-left: 0px"
 252 |             @[keyEvent]="HideKey"
 253 |           >
 254 |             <svg
 255 |               class="jp"
 256 |               viewBox="0 0 1024 1024"
 257 |               xmlns="http://www.w3.org/2000/svg"
 258 |               v-if="equipmentType === 'pc'"
 259 |             >
 260 |               <path
 261 |                 d="M390.94044445 560.84859262h97.39377777V463.45481485H390.94044445v97.39377777zM560.24177778 317.81925929H463.75822222v97.39377778h97.39377778V317.81925929z m-145.63555556 0H318.12266667v97.39377778h97.39377778V317.81925929z m291.27111111 0H609.39377778v97.39377778h97.39377777V317.81925929zM536.576 560.84859262h97.39377778V463.45481485H536.576v97.39377777zM268.97066667 317.81925929H172.48711111v97.39377778h97.39377778V317.81925929z m486.05866666 97.39377778h97.39377778V317.81925929H755.02933333v97.39377778z m145.63555556-243.02933334H123.33511111c-53.70311111 0-97.39377778 43.69066667-97.39377778 97.39377778V754.72592595c0 53.70311111 43.69066667 97.39377778 97.39377778 97.39377778h776.41955556c53.70311111 0 97.39377778-43.69066667 97.39377778-97.39377778V269.57748151c0-53.70311111-43.69066667-97.39377778-96.48355556-97.39377778z m48.24177778 582.54222222c0 26.39644445-21.84533333 48.24177778-48.24177778 48.24177778H123.33511111c-26.39644445 0-48.24177778-21.84533333-48.24177778-48.24177778V269.57748151c0-26.39644445 21.84533333-48.24177778 48.24177778-48.24177778h776.41955556c26.39644445 0 48.24177778 21.84533333 48.24177778 48.24177778l0.91022222 485.14844444zM682.21155555 560.84859262h97.39377778V463.45481485H682.21155555v97.39377777z m-388.66488888 145.63555556h436.90666666V609.0903704H293.54666667v97.39377778zM341.78844445 463.45481485H245.30488889v97.39377777h97.39377778V463.45481485z"
 262 |               />
 263 |             </svg>
 264 |             <span>
 265 |               {{ equipmentType === "pc" ? "隐藏" : "隐藏键盘" }}
 266 |               <template v-if="equipmentType === 'pc'">
 267 |                 <br />
 268 |                 <i style="display: block; transform: scaleX(2)">v</i>
 269 |               </template>
 270 |             </span>
 271 |           </span>
 272 |           <span
 273 |             class="key number blue"
 274 |             style="font-size: 36px; visibility: hidden"
 275 |             >英文</span
 276 |           >
 277 |         </div>
 278 |       </div>
 279 |     </div>
 280 |   </transition>
 281 | </template>
 282 | 
 283 | <script>
 284 | import AllKey from "./key";
 285 | // import Worker from "./index.worker.js";
 286 | 
 287 | let dict = {};
 288 | let doubleSpell = {};
 289 | let input = {};
 290 | export default {
 291 |   created() {
 292 |     // const that = this;
 293 |     if (window.screen.width < this.screen) {
 294 |       // 当前设备是移动设备
 295 |       this.equipmentType = "phone";
 296 |     }
 297 |     // this.worker = new Worker();
 298 |     // 注册监听函数，接收子线程消息
 299 |     // this.worker.onmessage = (event) => {
 300 |     //   let txtList = event.data.data;
 301 |     //   const array = Array.isArray(this.cn_list_str);
 302 |     //   const cn_input = event.data.cn_input;
 303 |     //   const method = event.data.method;
 304 |     //   if (cn_input) this.cn_input = cn_input;
 305 |     //   if (method === "setCn_input") {
 306 |     //     this.findChinese();
 307 |     //     return;
 308 |     //   }
 309 |     //   if (txtList?.length) {
 310 |     //     if (array) {
 311 |     //       this.cn_list_str = txtList;
 312 |     //     } else {
 313 |     //       let str = txtList.join("");
 314 |     //       this.cn_list_str = str + this.cn_list_str;
 315 |     //     }
 316 |     //   }
 317 |     // };
 318 |     let promiseList = [];
 319 |     if (this.singleDict) {
 320 |       const promise = import("@/" + this.singleDict).then((res) => {
 321 |         dict = res;
 322 |         Object.freeze(dict);
 323 |         // this.worker.postMessage({
 324 |         //   method: "init",
 325 |         //   data: dict,
 326 |         //   dataKey: "dict",
 327 |         // });
 328 |       });
 329 | 
 330 |       promiseList.push(promise);
 331 |     }
 332 |     if (this.manyDict) {
 333 |       const promise = import("@/" + this.manyDict).then((res) => {
 334 |         doubleSpell = res;
 335 |         Object.freeze(doubleSpell);
 336 |         // this.worker.postMessage({
 337 |         //   method: "init",
 338 |         //   data: doubleSpell,
 339 |         //   dataKey: "doubleSpell",
 340 |         // });
 341 |       });
 342 |       promiseList.push(promise);
 343 |     }
 344 | 
 345 |     Promise.all(promiseList)
 346 |       .then(() => {
 347 |         this.$emit("initResult", "success");
 348 |       })
 349 |       .catch((err) => {
 350 |         console.error("词库错误", err);
 351 |         this.$emit("initResult", "fail");
 352 |       });
 353 |   },
 354 |   mounted() {
 355 |     this.$nextTick(() => {
 356 |       this.inputBindKeyboard();
 357 |     });
 358 |   },
 359 |   components: {
 360 |     keyDel: {
 361 |       data() {
 362 |         return {
 363 |           interval: null,
 364 |           isIntervalDel: false,
 365 |         };
 366 |       },
 367 |       methods: {
 368 |         touchstartDel(e) {
 369 |           e.preventDefault();
 370 |           if (!this.interval) {
 371 |             e.currentTarget.style.background = "#d0d0d0";
 372 |             // e.currentTarget.classList.add(this.$parent.keyDownClass);
 373 |             this.interval = setInterval(() => {
 374 |               this.isIntervalDel = true;
 375 |               this.$parent.del(e);
 376 |             }, 100);
 377 |           }
 378 |         },
 379 |         touchendDel(e) {
 380 |           e.preventDefault();
 381 | 
 382 |           this.interval = clearInterval(this.interval);
 383 |           if (!this.isIntervalDel) {
 384 |             this.$parent.del(e);
 385 |           }
 386 |           e.currentTarget.style.background = "#fff";
 387 |           this.isIntervalDel = false;
 388 |         },
 389 |       },
 390 |       render() {
 391 |         let data = this.$parent.$data;
 392 |         let def_mode = data.def_mode;
 393 |         let className = "key def-del";
 394 |         let sWidth = "50";
 395 |         let sHeight = "50";
 396 |         if (
 397 |           !["cn", "en_cap", "en", "password"].includes(def_mode) ||
 398 |           data.showDiction
 399 |         ) {
 400 |           className = "key number num-del";
 401 |           sWidth = "65";
 402 |           sHeight = "65";
 403 |           if (data.showDiction) {
 404 |             sWidth = "75";
 405 |             sHeight = "75";
 406 |           }
 407 |         }
 408 |         return (
 409 |           <span
 410 |             class={className}
 411 |             onTouchend={this.touchendDel}
 412 |             onTouchstart={this.touchstartDel}
 413 |             onMouseup={this.touchendDel}
 414 |             onMousedown={this.touchstartDel}
 415 |           >
 416 |             <svg
 417 |               viewBox="0 0 1024 1024"
 418 |               xmlns="http://www.w3.org/2000/svg"
 419 |               width={sWidth}
 420 |               height={sHeight}
 421 |             >
 422 |               <path d="M938.8 227.7H284.6L0.1 511.3l284.4 284.4v0.8h654.2c47.1 0 85.3-38.2 85.3-85.3V313c0.1-47.1-38.1-85.3-85.2-85.3z m-172.1 385l-40.2 40.2-100.6-100.6-100.6 100.6-40.2-40.2 100.6-100.6-100.6-100.5 40.2-40.2L625.9 472l100.6-100.6 40.2 40.2-100.6 100.5 100.6 100.6z" />
 423 |             </svg>
 424 |           </span>
 425 |         );
 426 |       },
 427 |     },
 428 |     fullTriangle: {
 429 |       functional: true,
 430 |       render() {
 431 |         // console.warn("h", h);
 432 |         return (
 433 |           <svg
 434 |             width="14"
 435 |             height="14"
 436 |             viewBox="0 0 48 48"
 437 |             fill="none"
 438 |             xmlns="http://www.w3.org/2000/svg"
 439 |           >
 440 |             <path
 441 |               fill-rule="evenodd"
 442 |               clip-rule="evenodd"
 443 |               d="M22.2692 6.98965C23.0395 5.65908 24.9605 5.65908 25.7309 6.98965L44.262 38.9979C45.0339 40.3313 44.0718 42 42.5311 42H5.4689C3.92823 42 2.96611 40.3313 3.73804 38.9979L22.2692 6.98965Z"
 444 |               fill="#fff"
 445 |               stroke="#fff"
 446 |               stroke-width="4"
 447 |               stroke-linecap="round"
 448 |               stroke-linejoin="round"
 449 |             />
 450 |           </svg>
 451 |         );
 452 |       },
 453 |     },
 454 |   },
 455 |   props: {
 456 |     manyDict: {
 457 |       type: String,
 458 |       default: "",
 459 |     },
 460 |     singleDict: {
 461 |       type: String,
 462 |       default: "",
 463 |     },
 464 |     screen: { type: Number, default: 700 },
 465 |     blurHide: { type: Boolean, default: true },
 466 |     EnterActiveClass: { type: String, default: "fadeInUp" },
 467 |     LeaveActiveClass: { type: String, default: "fadeOutDown" },
 468 |     showKeyboard: { type: Boolean, default: false },
 469 |     maxQuantify: { type: Number, default: 10 },
 470 |     transitionTime: { type: String, default: "0.3s" },
 471 |     keyUpClass: { type: String, default: "keyUp" },
 472 |     keyDownClass: { type: String, default: "keyDown" },
 473 |     inputEvent: null,
 474 |   },
 475 |   data() {
 476 |     return {
 477 |       show: this.showKeyboard,
 478 |       showDiction: false,
 479 |       equipmentType: "pc",
 480 |       input_top: 0,
 481 |       def_mode: "cn",
 482 |       old_mode: "",
 483 |       mainMode: "",
 484 |       cn_input: "",
 485 |       cn_list_str: [],
 486 |       l_min: 0,
 487 |       l_max: this.maxQuantify,
 488 |       cursorPosition: -1,
 489 |     };
 490 |   },
 491 |   watch: {
 492 |     inputEvent: function (val) {
 493 |       const showKeyboard = this.showKeyboard;
 494 |       let show = false;
 495 | 
 496 |       if (val && val.target && showKeyboard) {
 497 |         input = val.target;
 498 |         this.mode = val.mode || "cn";
 499 |         show = true;
 500 |         this.getCaretPosition(val.target);
 501 |       }
 502 |       this.show = show;
 503 |     },
 504 |     show: function (val) {
 505 |       if (!val) this.showDiction = false;
 506 |       this.$emit("changeShow", val);
 507 |     },
 508 |     showDiction: function () {
 509 |       this.initKeyColor();
 510 |     },
 511 |   },
 512 |   computed: {
 513 |     number_keys() {
 514 |       let list = AllKey.number || [];
 515 | 
 516 |       return list.filter((num) => {
 517 |         if (isNaN(Number(num))) return false;
 518 |         return true;
 519 |       });
 520 |     },
 521 |     keyEvent() {
 522 |       const equipmentType = this.equipmentType;
 523 |       let result = "mousedown";
 524 | 
 525 |       if (
 526 |         equipmentType === "phone" ||
 527 |         "ontouchstart" in document.documentElement
 528 |       ) {
 529 |         result = "touchstart";
 530 |       }
 531 | 
 532 |       return result;
 533 |     },
 534 |     previousStyleFn() {
 535 |       let result = {
 536 |         background: "#a7a7a7",
 537 |       };
 538 |       const l_min = this.l_min;
 539 |       if (l_min > 0) {
 540 |         result.background = "#344a5d";
 541 |       }
 542 |       return result;
 543 |     },
 544 |     nextPageStyleFn() {
 545 |       let result = {
 546 |         background: "#a7a7a7",
 547 |       };
 548 |       const cn_list_str = this.cn_list_str || [];
 549 | 
 550 |       const l_max = this.l_max;
 551 |       if (cn_list_str.length > l_max) {
 552 |         result.background = "#344a5d";
 553 |       }
 554 |       return result;
 555 |     },
 556 |     number_keys2() {
 557 |       let numKeyList = AllKey.number;
 558 |       let biaodianKeyList = AllKey.biaodian;
 559 | 
 560 |       let resultArray = numKeyList;
 561 |       if (["num", "id_card", "di_git"].includes(this.mode)) {
 562 |         if (!this.old_mode) {
 563 |           resultArray = numKeyList.map((key) => {
 564 |             if (["X", "."].includes(key) && this.mode === "num") {
 565 |               // if (key === "X") {
 566 |               //   return " ";
 567 |               // }
 568 |               return "";
 569 |             }
 570 |             if (["."].includes(key) && this.mode === "id_card") {
 571 |               return "";
 572 |             }
 573 |             if (["X", "."].includes(key) && this.mode === "di_git") {
 574 |               if (key === ".") {
 575 |                 return "";
 576 |               }
 577 |               return ".";
 578 |             }
 579 |             return key;
 580 |           });
 581 |         }
 582 |       } else {
 583 |         resultArray = biaodianKeyList;
 584 |       }
 585 |       return resultArray;
 586 |     },
 587 |     letter_keys() {
 588 |       return this.mode === "en_cap" ? AllKey.cap_letter : AllKey.letter;
 589 |     },
 590 |     cut_cn_list() {
 591 |       if (this.cn_list_str) {
 592 |         const equipmentType = this.equipmentType;
 593 |         let result = this.cn_list_str.slice(this.l_min, this.l_max);
 594 |         if (equipmentType === "phone") result = this.cn_list_str;
 595 | 
 596 |         return result;
 597 |       }
 598 |       return [];
 599 |     },
 600 |     mode: {
 601 |       get() {
 602 |         return this.def_mode;
 603 |       },
 604 |       set(val) {
 605 |         if (JSON.stringify(dict) === "{}") {
 606 |           if (["cn", "password"].includes(val)) {
 607 |             val = "password";
 608 |           }
 609 |           this.mainMode = "noCn";
 610 |         }
 611 |         if (["password"].includes(val)) {
 612 |           this.mainMode = "noCn";
 613 |         }
 614 |         this.old_mode = this.def_mode;
 615 |         this.def_mode = val;
 616 |         if (val != "cn") {
 617 |           this.cn_list_str = [];
 618 |           this.cn_input = "";
 619 |         }
 620 |         this.initKeyColor();
 621 |         this.showDiction = false;
 622 |         this.$emit("changeMode", val);
 623 |       },
 624 |     },
 625 |   },
 626 |   methods: {
 627 |     initKeyColor() {
 628 |       this.$nextTick(() => {
 629 |         let keyDivList = document.querySelectorAll(
 630 |           ".my-keyboard .key:not([bindtouchendAndmouseup])"
 631 |         );
 632 | 
 633 |         let fn = function (e) {
 634 |           if (!Array.from(e.currentTarget.classList).includes("key_hide")) {
 635 |             e.currentTarget.style.background = "#fff";
 636 |           }
 637 |         };
 638 |         for (let item of keyDivList) {
 639 |           item.setAttribute("bindtouchendAndmouseup", "true");
 640 |           item.addEventListener("touchend", fn);
 641 |           item.addEventListener("touchmove", fn);
 642 |           item.addEventListener("mouseup", fn);
 643 |           item.addEventListener("mousemove", fn);
 644 |         }
 645 |       });
 646 |     },
 647 |     isShowDiction(e) {
 648 |       e.preventDefault();
 649 |       this.showDiction = true;
 650 |     },
 651 |     showNumberKey(key) {
 652 |       console.log("key", key);
 653 |       const def_mode = this.def_mode;
 654 | 
 655 |       if (def_mode === "num") {
 656 |         if ([".", "X"].includes(key)) {
 657 |           key = "";
 658 |         }
 659 |       }
 660 |       return key;
 661 |     },
 662 |     inputBindKeyboard() {
 663 |       const that = this;
 664 |       this.$nextTick(() => {
 665 |         //每个input添加事件
 666 |         const inputAll = document.querySelectorAll(
 667 |           "[keyboard='true']:not([bindkeyboard])"
 668 |         );
 669 |         inputAll.forEach((e) => {
 670 |           // if (e.dataset.mode) {
 671 |           e.setAttribute("bindkeyboard", "true");
 672 |           e.addEventListener("focus", that.showKeyBoardFn);
 673 |           e.addEventListener("click", () => {
 674 |             setTimeout(() => {
 675 |               // console.log("selectionStart", input.selectionStart);
 676 |             }, 100);
 677 |           });
 678 |           if (that.blurHide) {
 679 |             e.addEventListener("blur", () => {
 680 |               that.show = false;
 681 |             });
 682 |           }
 683 |           // }
 684 |         });
 685 |       });
 686 |     },
 687 |     setInputValue(key, type = "set") {
 688 |       let cursor = input.selectionStart;
 689 |       let tagName = input.tagName;
 690 | 
 691 |       let isContenteditable = !!input.getAttribute("contenteditable");
 692 |       let value = input.value;
 693 |       if (isContenteditable) {
 694 |         cursor = this.getCaretPosition(input);
 695 |         value = input.innerText;
 696 |       }
 697 |       if (type === "del") {
 698 |         if (cursor > 0) {
 699 |           let cursorEnd = input.selectionEnd;
 700 |           if (cursorEnd != cursor && tagName === "INPUT ") {
 701 |             value = value
 702 |               ?.split("")
 703 |               ?.filter((item, index) => {
 704 |                 if (index < cursor || index >= cursorEnd) {
 705 |                   return item;
 706 |                 }
 707 |               })
 708 |               ?.join("");
 709 |           } else {
 710 |             value = this.delStringLast(value, cursor);
 711 |             cursor -= 1;
 712 |           }
 713 |         }
 714 |       } else {
 715 |         value = this.insertString(value, key, cursor);
 716 |         if (key.charCodeAt(key) > 127 || key.charCodeAt(key) > 94) {
 717 |           cursor += key.length;
 718 |         } else {
 719 |           cursor += 1;
 720 |         }
 721 |       }
 722 | 
 723 |       if (isContenteditable) {
 724 |         input.innerText = value;
 725 |         let range = document.createRange();
 726 |         let sel = window.getSelection();
 727 |         range.setStart(input.childNodes[0], cursor);
 728 |         range.collapse(true);
 729 |         sel.removeAllRanges();
 730 |         sel.addRange(range);
 731 |         this.$emit("contenteditableInput", input.innerText);
 732 |       } else {
 733 |         input.value = value;
 734 |         input.selectionStart = cursor;
 735 |         input.selectionEnd = cursor;
 736 |         input.dispatchEvent(new Event("input", { bubbles: true }));
 737 |       }
 738 |     },
 739 |     getCaretPosition(element) {
 740 |       let carePos = 0,
 741 |         sel,
 742 |         range;
 743 | 
 744 |       if (window.getSelection) {
 745 |         sel = window.getSelection();
 746 |         if (sel.rangeCount) {
 747 |           range = sel.getRangeAt(0);
 748 | 
 749 |           if (range.commonAncestorContainer.parentNode == element) {
 750 |             carePos = range.endOffset;
 751 |             // console.log(range);
 752 |             if (
 753 |               range.commonAncestorContainer.length !=
 754 |               range.commonAncestorContainer.data.trim().length
 755 |             ) {
 756 |               carePos -= 1;
 757 |             }
 758 |           }
 759 |         }
 760 |       }
 761 | 
 762 |       this.cursorPosition = carePos;
 763 |       return carePos;
 764 |     },
 765 |     showKeyBoardFn(e) {
 766 |       this.mainMode = "";
 767 |       const showKeyboard = this.showKeyboard;
 768 |       if (showKeyboard) return;
 769 |       input = e.target;
 770 |       this.show = true;
 771 |       this.mode = e.target.dataset.mode || "cn";
 772 |       this.old_mode = "";
 773 |     },
 774 |     HideKey() {
 775 |       this.show = false;
 776 |       input.blur();
 777 |     },
 778 |     mousedown(e) {
 779 |       // console.log(input);
 780 |       e.preventDefault();
 781 |     },
 782 |     //点击按钮
 783 |     clickKey(e, key, pass) {
 784 |       e.preventDefault();
 785 |       e.stopImmediatePropagation();
 786 |       e.target.style.background = "#d0d0d0";
 787 |       if (input !== document.activeElement) return;
 788 | 
 789 |       if (this.mode === "cn" && !pass) {
 790 |         this.cn_input += key;
 791 |         const specialPinYin = ["u", "v", "i"].includes(
 792 |           this.cn_input.split("")[0]
 793 |         );
 794 |         if (specialPinYin) {
 795 |           if (!this.cn_list_str.length) {
 796 |             this.cn_list_str = [key];
 797 |           } else {
 798 |             const value = this.cn_list_str[0] + key;
 799 |             this.$set(this.cn_list_str, 0, value);
 800 |           }
 801 | 
 802 |           return;
 803 |         }
 804 |         this.findChinese("add", key);
 805 |       } else {
 806 |         this.setInputValue(key);
 807 |       }
 808 | 
 809 |       this.$emit("clickKey", key);
 810 |     },
 811 |     mergeChinese(strList) {
 812 |       let endList = [];
 813 |       strList.reduce((totalList, list) => {
 814 |         if (!totalList.length) return list;
 815 |         for (let i = 0; i < totalList.length; i++) {
 816 |           let t = totalList[i] || "";
 817 |           let l = list[i] || "";
 818 |           totalList[i] = t + l;
 819 |           if (totalList.length - 1 === i) {
 820 |             endList.push(list.slice(i + 1));
 821 |           }
 822 |         }
 823 | 
 824 |         return totalList;
 825 |       }, []);
 826 |       const list = strList.flat(2);
 827 |       return list; //list.concat(endList);
 828 |     },
 829 |     clickNumber(e, key) {
 830 |       if (
 831 |         !AllKey.number.find((k) => k === key) &&
 832 |         this.def_mode != "biaodian"
 833 |       ) {
 834 |         return;
 835 |       }
 836 | 
 837 |       if (input !== document.activeElement) return;
 838 |       e.preventDefault();
 839 |       e.target.style.background = "#d0d0d0";
 840 |       if (this.mode === "cn" && this.cn_input !== "") {
 841 |         let value = this.cut_cn_list[parseInt(key) - 1];
 842 |         if (!value) return;
 843 |         this.selectCN(value);
 844 |         this.setInputValue(value);
 845 |       } else {
 846 |         this.setInputValue(key);
 847 |       }
 848 | 
 849 |       this.$emit("clickNumber", key);
 850 |     },
 851 |     selectCN(text) {
 852 |       let strList = this.cn_input.split("'");
 853 | 
 854 |       // let pingYinList = [];
 855 |       if (strList.length === 1 || text.length >= strList.length) {
 856 |         this.cn_input = "";
 857 |         this.cn_list_str = [];
 858 |         this.l_min = 0;
 859 |         this.l_max = this.maxQuantify;
 860 |         return;
 861 |       }
 862 |       this.setCn_input(text);
 863 |       // this.worker.postMessage({
 864 |       //   method: "setCn_input",
 865 |       //   cn_input: this.cn_input,
 866 |       //   text,
 867 |       // });
 868 |     },
 869 |     setCn_input(text) {
 870 |       let cn_input = this.cn_input;
 871 |       const singleDict = dict;
 872 |       let itemList = [];
 873 |       for (let key in singleDict) {
 874 |         let value = singleDict[key];
 875 |         if (typeof value === "string") {
 876 |           let valueList = value.split("");
 877 |           let item = valueList.find((item) => item === text);
 878 |           if (item) {
 879 |             itemList.push(key);
 880 |           }
 881 |         }
 882 |       }
 883 |       let str = "";
 884 | 
 885 |       const cn_inputList = cn_input.split("'");
 886 |       for (let i = 0; i < cn_inputList.length; i++) {
 887 |         let item = cn_inputList[i];
 888 |         for (let key of itemList) {
 889 |           let list = key.split("");
 890 |           let count = 0;
 891 |           for (let k = 0; k < list.length; k++) {
 892 |             if (key.charAt(k) === item.charAt(k)) {
 893 |               count += 1;
 894 |               if (
 895 |                 k === 0 &&
 896 |                 item.length != key.length &&
 897 |                 key.length > item.length
 898 |               ) {
 899 |                 // 用于处理首单词缩写法
 900 |                 str = item;
 901 |               }
 902 |             }
 903 |             if (count === list.length) {
 904 |               str = item;
 905 |             }
 906 |           }
 907 |         }
 908 |       }
 909 |       this.cn_input = cn_inputList.filter((item) => item != str).join("'");
 910 |       this.findChinese();
 911 |     },
 912 |     clickCN(e, text) {
 913 |       e.preventDefault();
 914 |       e.stopImmediatePropagation();
 915 |       this.showDiction = false;
 916 | 
 917 |       this.setInputValue(text);
 918 |       this.selectCN(text);
 919 | 
 920 |       this.$emit("clickCN", text);
 921 |     },
 922 |     findChinese(type, key) {
 923 |       // type = del key不需要传，type = add key必须要传
 924 |       this.l_min = 0;
 925 |       this.l_max = this.maxQuantify;
 926 |       const pinYinList = this.cn_input.split("'");
 927 |       let pinYin = pinYinList[pinYinList.length - 1];
 928 | 
 929 |       let re = new RegExp(`^${pinYin}\\w*`);
 930 |       let keys = Object.keys(dict)
 931 |         .filter((item) => {
 932 |           let strList = pinYin.split("");
 933 | 
 934 |           const temp = ["h", "o", "n", "a", "e"].includes(
 935 |             strList[strList.length - 1]
 936 |           );
 937 |           if (pinYin.length >= 2 && !temp) {
 938 |             if (item === pinYin) return true;
 939 |           } else {
 940 |             let result = re.test(item);
 941 |             return result;
 942 |           }
 943 |         })
 944 |         .sort();
 945 | 
 946 |       this.cn_list_str =
 947 |         keys.length > 1
 948 |           ? keys.reduce((a, b) => a + dict[b], "")
 949 |           : dict[keys[0]];
 950 | 
 951 |       if (!this.cn_list_str || (!this.cn_list_str.length && type === "del")) {
 952 |         this.cn_input = this.cn_input.replace(
 953 |           new RegExp(`(.*)${key}`),
 954 |           `$1'${key}`
 955 |         );
 956 |       }
 957 | 
 958 |       if (!this.cn_list_str && !Array.isArray(this.cn_list_str)) {
 959 |         this.cn_list_str = [];
 960 |       }
 961 | 
 962 |       keys = this.cn_input.split("'");
 963 | 
 964 |       if (keys.length >= 2) {
 965 |         this.cn_list_str = [];
 966 |         this.findDoubleSpell();
 967 |         // this.worker.postMessage({
 968 |         //   method: "search",
 969 |         //   key: this.cn_input,
 970 |         // });
 971 |       }
 972 |     },
 973 |     findDoubleSpell() {
 974 |       let cn_input = this.cn_input;
 975 |       let keys = cn_input.split("'");
 976 |       const partDict = doubleSpell[cn_input.charAt(0)];
 977 |       if (!partDict) return;
 978 |       if (["an"].includes(keys[keys.length - 1])) {
 979 |         let tempStr = keys[keys.length - 2];
 980 |         if (["n"].includes(tempStr.charAt(tempStr.length - 1))) {
 981 |           let newTempStr = tempStr.slice(0, tempStr.length - 1);
 982 |           keys = [
 983 |             newTempStr,
 984 |             tempStr.slice(tempStr.length - 1) + keys[keys.length - 1],
 985 |           ];
 986 |           cn_input = keys.join("'");
 987 |           this.cn_input = cn_input;
 988 |         }
 989 |       }
 990 | 
 991 |       let keyResult = Object.keys(partDict).filter((key) => {
 992 |         const keys = key.split("'");
 993 |         const cn_inputList = cn_input.split("'");
 994 |         const isLen = cn_inputList.length === keys.length;
 995 |         if (!isLen) return;
 996 |         let result = true;
 997 |         for (let i = 0; i < keys.length; i++) {
 998 |           if (keys[i].charAt(0) != cn_inputList[i].charAt(0)) {
 999 |             result = false;
1000 |           } else {
1001 |             const keyItemList = keys[i].split("");
1002 |             const strList = cn_inputList[i].split("");
1003 |             for (let j = 0; j < strList.length; j++) {
1004 |               if (!strList[j]) break;
1005 |               if (keyItemList[j] != strList[j]) {
1006 |                 result = false;
1007 |               }
1008 |             }
1009 |           }
1010 |         }
1011 |         if (result && isLen) {
1012 |           return partDict[key];
1013 |         }
1014 |       });
1015 | 
1016 |       let strList = [];
1017 |       let singleDictList = [];
1018 |       const singleDict = dict;
1019 |       for (let key of keyResult) {
1020 |         let keyList = key.split("'");
1021 |         strList.push(partDict[key].split(","));
1022 |         for (let item of keyList) {
1023 |           // console.log('singleDict[item]', singleDict[item])
1024 |           if (singleDict[item]) {
1025 |             singleDictList.push(singleDict[item].split(""));
1026 |           }
1027 |         }
1028 |       }
1029 |       if (!keyResult.length && keys.length) {
1030 |         for (let item of keys) {
1031 |           if (singleDict[item]) {
1032 |             singleDictList.push(singleDict[item].split(""));
1033 |           }
1034 |         }
1035 |       }
1036 | 
1037 |       singleDictList = Array.from(new Set(singleDictList.flat(2)));
1038 |       strList = strList
1039 |         .flat(2)
1040 |         .sort((a, b) => {
1041 |           if (b.length > a.length) return -1;
1042 |         })
1043 |         .reverse();
1044 |       this.cn_list_str = strList.concat(singleDictList);
1045 |     },
1046 |     del(e) {
1047 |       e.stopImmediatePropagation();
1048 |       e.preventDefault();
1049 |       if (input !== document.activeElement) return;
1050 |       const showDiction = this.showDiction;
1051 |       if (this.mode === "cn" && this.cn_input !== "" && !showDiction) {
1052 |         this.cn_input = this.delStringLast(this.cn_input, this.cn_input.length);
1053 | 
1054 |         if (this.cn_input === "") {
1055 |           this.cn_list_str = [];
1056 |           return;
1057 |         }
1058 |         const specialPinYin = ["u", "v", "i"].includes(
1059 |           this.cn_input.split("")[0]
1060 |         );
1061 |         if (
1062 |           this.cn_list_str &&
1063 |           this.cn_list_str.length === 1 &&
1064 |           specialPinYin
1065 |         ) {
1066 |           this.cn_list_str = [this.cn_input];
1067 |           return;
1068 |         }
1069 |         let re = new RegExp(`^${this.cn_input}\\w*`);
1070 |         let keys = Object.keys(dict)
1071 |           .filter((key) => {
1072 |             const result = re.test(key);
1073 |             return result;
1074 |           })
1075 |           .sort();
1076 | 
1077 |         this.cn_list_str =
1078 |           (keys.length > 1
1079 |             ? keys.reduce((a, b) => a + dict[b], "")
1080 |             : dict[keys[0]]) || "".split("");
1081 | 
1082 |         this.findChinese("del");
1083 |         this.$emit("del", JSON.parse(JSON.stringify(this.cn_input)));
1084 |       } else {
1085 |         this.setInputValue(null, "del");
1086 |       }
1087 |     },
1088 |     /**字符串插入文字 */
1089 |     insertString(text, input, index) {
1090 |       let arrText = text.split("");
1091 |       arrText.splice(index, 0, input);
1092 |       return arrText.join("");
1093 |     },
1094 |     /**删除字符串的某个字符*/
1095 |     delStringLast(text, index) {
1096 |       if (index < 0) return;
1097 |       let arrText = text.split("");
1098 |       if (index > 0) {
1099 |         arrText[index - 1] = "";
1100 |       } else {
1101 |         arrText[index] = "";
1102 |       }
1103 | 
1104 |       arrText = arrText.filter((item) => item);
1105 |       const endIndex = arrText.length - 1;
1106 |       if (arrText[endIndex] === "'") {
1107 |         arrText[endIndex] = "";
1108 |       }
1109 |       let result = arrText.join("");
1110 | 
1111 |       return result;
1112 |     },
1113 |     cap_change() {
1114 |       if (this.mainMode === "noCn") {
1115 |         this.mode = this.mode === "en_cap" ? "password" : "en_cap";
1116 |         return;
1117 |       }
1118 |       this.mode = this.mode === "en_cap" ? "en" : "en_cap";
1119 |     },
1120 |     cn_change(mode) {
1121 |       if (this.mainMode === "noCn") {
1122 |         this.mode = mode === "en" ? "cn" : "en";
1123 |       } else {
1124 |         this.mode = mode;
1125 |       }
1126 |       this.cn_input = "";
1127 |       this.cn_list_str = [];
1128 |     },
1129 |     Fanhui() {
1130 |       if (this.showDiction) {
1131 |         this.showDiction = false;
1132 |         return;
1133 |       }
1134 | 
1135 |       if (["num", "biaodian"].includes(this.old_mode) || !this.old_mode) {
1136 |         this.mode = "cn";
1137 |         return;
1138 |       }
1139 | 
1140 |       this.mode = this.old_mode;
1141 |     },
1142 |     previous_page(e) {
1143 |       e.preventDefault();
1144 |       e.stopImmediatePropagation();
1145 |       if (this.l_min > 0) {
1146 |         this.l_min = this.l_min - this.maxQuantify;
1147 |         this.l_max = this.l_max - this.maxQuantify;
1148 |       }
1149 |     },
1150 |     next_page(e) {
1151 |       e.preventDefault();
1152 |       e.stopImmediatePropagation();
1153 |       if (this.cn_list_str.length > this.l_max) {
1154 |         this.l_min += this.maxQuantify;
1155 |         this.l_max += this.maxQuantify;
1156 |       }
1157 |     },
1158 |   },
1159 | };
1160 | </script>
1161 | 
1162 | <style lang="scss" scoped>
1163 | .keyUp {
1164 | }
1165 | .keyDown {
1166 |   background: #d0d0d0;
1167 | }
1168 | .keyboardTransition-enter-active,
1169 | .keyboardTransition-leave-active {
1170 |   max-height: 500px;
1171 | }
1172 | .keyboardTransition-enter,
1173 | .keyboardTransition-leave-to {
1174 |   max-height: 0px;
1175 | }
1176 | 
1177 | .disabled_key {
1178 |   background: #f2f2f2 !important;
1179 |   cursor: default !important;
1180 |   color: rgb(170, 170, 170);
1181 |   border-color: rgba(118, 118, 118, 0.3);
1182 | }
1183 | i {
1184 |   font-style: normal;
1185 | }
1186 | .num-del > svg {
1187 |   margin-top: -5px;
1188 | }
1189 | .def-del > svg {
1190 |   margin-top: 0px;
1191 | }
1192 | .hand-del > svg {
1193 |   margin-top: 0px;
1194 | }
1195 | .my-keyboard {
1196 |   position: fixed;
1197 |   left: 0px;
1198 |   z-index: 10;
1199 |   bottom: 0px;
1200 |   width: 100%;
1201 |   // min-width: 1024px;
1202 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
1203 |   -webkit-font-smoothing: antialiased;
1204 |   -moz-osx-font-smoothing: grayscale;
1205 |   text-align: center;
1206 |   color: #2c3e50;
1207 |   .pinyin,
1208 |   .select-list {
1209 |     > div {
1210 |       width: 100%;
1211 |       margin: 0 auto;
1212 |     }
1213 |     .item_main {
1214 |       width: 86%;
1215 |     }
1216 |   }
1217 |   .pinyin {
1218 |     // height: 30px;
1219 |     background: #fff;
1220 |     border: 1px solid rgba(209, 209, 209, 1);
1221 |     padding: 0 20px;
1222 |     text-align: left;
1223 |     > div span {
1224 |       font-size: 20px;
1225 |       line-height: 30px;
1226 |       font-weight: bold;
1227 |     }
1228 |   }
1229 |   .select-list {
1230 |     background: #fff;
1231 |     border: 1px solid rgba(209, 209, 209, 1);
1232 |     border-top: none;
1233 |     padding: 0 20px;
1234 |     text-align: left;
1235 |     > div {
1236 |       position: relative;
1237 |     }
1238 |     .select-text {
1239 |       cursor: pointer;
1240 |       line-height: 40px;
1241 |       font-size: 24px;
1242 |       font-weight: bold;
1243 |       & + .select-text {
1244 |         margin-left: 15px;
1245 |       }
1246 |     }
1247 |     .page {
1248 |       position: absolute;
1249 |       top: 0;
1250 |       right: 0px;
1251 |       width: 120px;
1252 |       height: 40px;
1253 |       .next {
1254 |         transform: scaleX(2) rotate(180deg);
1255 |       }
1256 |       > p {
1257 |         margin-top: 0px;
1258 |         margin-bottom: 0px;
1259 |         display: inline-block;
1260 |         text-align: center;
1261 |         transform: scaleX(2);
1262 |         width: 30px;
1263 |         height: 38px;
1264 |         line-height: 38px;
1265 |         background: #344a5d;
1266 |         color: #fff;
1267 |         border: 1px solid #d7d7d7;
1268 |         border-radius: 5px;
1269 |         cursor: pointer;
1270 |         &:active {
1271 |           background: #fff;
1272 |           color: #344a5d;
1273 |         }
1274 |         & + p {
1275 |           margin-left: 30px;
1276 |         }
1277 |       }
1278 |     }
1279 |   }
1280 | 
1281 |   .main-keyboard {
1282 |     padding: 0 14px;
1283 |     background: #e6e6e6;
1284 |     height: 305px;
1285 |     .key {
1286 |       height: 50px;
1287 |       line-height: 50px;
1288 |       font-size: 25px;
1289 |       font-weight: 700;
1290 |       width: 80px;
1291 |       background: #fff;
1292 |       display: inline-block;
1293 |       vertical-align: middle;
1294 |       border-radius: 8px;
1295 |       margin-top: 8px;
1296 |       box-shadow: 1px 1px 2px rgba(20, 20, 20, 0.3);
1297 |       margin-left: 10px;
1298 |       cursor: pointer;
1299 |       &:active {
1300 |         background: #d0d0d0;
1301 |       }
1302 | 
1303 |       // & + .key {
1304 |       //   margin-left: 10px;
1305 |       // }
1306 |     }
1307 | 
1308 |     .number-box {
1309 |       width: 720px;
1310 |       display: inline-block;
1311 |       vertical-align: middle;
1312 |     }
1313 |     .number {
1314 |       width: 210px;
1315 |       height: 65px;
1316 |       font-size: 46px;
1317 |       line-height: 65px;
1318 |     }
1319 |     .del-box {
1320 |       width: 260px;
1321 |       display: inline-block;
1322 |       vertical-align: middle;
1323 |       .key {
1324 |         margin-left: 0px;
1325 |       }
1326 |     }
1327 |     .hand-left-box {
1328 |       width: 155px;
1329 |       display: inline-block;
1330 |       vertical-align: middle;
1331 |       .key {
1332 |         margin-left: 0px;
1333 |         //margin-top: 20px;
1334 |         &:nth-of-type(1) {
1335 |           margin-top: 0px;
1336 |         }
1337 |       }
1338 |       > span {
1339 |         width: 140px;
1340 |       }
1341 |     }
1342 | 
1343 |     .cap_change {
1344 |       width: 140px;
1345 |       color: #fff;
1346 |       background: #344a5d;
1347 |       // &:active {
1348 |       //   background: #728fa8;
1349 |       // }
1350 |     }
1351 |     .key_hide {
1352 |       background: #d6d1d0;
1353 |       > .jp {
1354 |         height: 50px;
1355 |         display: inline-block;
1356 |         vertical-align: middle;
1357 |       }
1358 |       > span {
1359 |         padding-left: 10px;
1360 |         font-size: 18px;
1361 |         line-height: 18px;
1362 |         display: inline-block;
1363 |         vertical-align: middle;
1364 |       }
1365 |     }
1366 |     .blue {
1367 |       // color: #fff;
1368 |       width: 140px;
1369 |       // background: #ff9213; // #344a5d;
1370 |       &:active {
1371 |         // background: #728fa8;
1372 |       }
1373 |       .blue_default {
1374 |         font-size: 16px;
1375 |         font-weight: 500;
1376 |       }
1377 |     }
1378 |     .red {
1379 |       color: #fff;
1380 |       background: #f56c6c;
1381 |       &:active {
1382 |         background: #f89e9e;
1383 |       }
1384 |     }
1385 |     .space {
1386 |       width: 357px;
1387 |     }
1388 |   }
1389 | }
1390 | 
1391 | .no_del_box {
1392 |   .num {
1393 |     .number:nth-last-child(2) {
1394 |       width: 430px;
1395 |     }
1396 |   }
1397 | }
1398 | .pc {
1399 |   min-width: 1100px;
1400 |   .def-del {
1401 |     width: 140px !important;
1402 |   }
1403 |   .no_del_box {
1404 |     height: 333px !important;
1405 |   }
1406 |   .hide12key {
1407 |     height: 30px;
1408 |   }
1409 | }
1410 | .phone {
1411 |   .hide12key {
1412 |     height: 25px;
1413 |     svg {
1414 |       width: 30px;
1415 |       height: 30px;
1416 |     }
1417 |   }
1418 |   .select-list {
1419 |     white-space: nowrap;
1420 |     .item_main {
1421 |       overflow: auto;
1422 |       width: 91%;
1423 |       .select-text {
1424 |         font-size: 19px;
1425 |       }
1426 |     }
1427 |     .page {
1428 |       right: 17px;
1429 |       text-align: right;
1430 |       width: 0px;
1431 |       height: 0px;
1432 |       .next {
1433 |         width: 23px;
1434 |         height: 38px;
1435 |       }
1436 |     }
1437 |   }
1438 |   .no_del_box {
1439 |     height: 253px !important;
1440 |   }
1441 |   .main-keyboard {
1442 |     padding: 0px;
1443 |     height: 235px;
1444 |     margin-left: -8px;
1445 |     .select_cn {
1446 |       overflow: auto;
1447 |       width: 71% !important;
1448 |       height: 94%;
1449 |       background: #fff;
1450 |       margin-top: 7px;
1451 |       border-radius: 10px;
1452 |       .select_cn_main {
1453 |         display: flex;
1454 |         // height: 100%;
1455 |         flex-wrap: wrap;
1456 |         .item {
1457 |           height: 20px;
1458 |           padding: 10px;
1459 |           border-bottom: 1px solid;
1460 |           font-size: 19px;
1461 |           font-weight: bold;
1462 |         }
1463 |       }
1464 |     }
1465 |     .number-box {
1466 |       width: 75%;
1467 |       .number {
1468 |         font-size: 26px;
1469 |         width: 29%;
1470 |         height: 45px;
1471 |       }
1472 |     }
1473 |     .del-box {
1474 |       width: 25%;
1475 |       span {
1476 |         width: 80%;
1477 |       }
1478 |       .number {
1479 |         font-size: 20px;
1480 |       }
1481 |       .key_hide {
1482 |         width: 80% !important;
1483 | 
1484 |         span {
1485 |           margin-bottom: 2px;
1486 |           padding-left: 0px;
1487 |           font-size: 15px;
1488 |         }
1489 |       }
1490 |       .num-del {
1491 |         svg {
1492 |           width: 48%;
1493 |           height: 9%;
1494 |           margin-top: -26px;
1495 |           position: relative;
1496 |           top: 13px;
1497 |         }
1498 |       }
1499 |       .blue {
1500 |         font-size: 26px !important;
1501 |       }
1502 |     }
1503 |     .key {
1504 |       width: 8%;
1505 |       height: 18%;
1506 |       margin-left: 6px !important;
1507 |       line-height: 45px;
1508 |     }
1509 | 
1510 |     .letter {
1511 |       font-size: 24px;
1512 |     }
1513 |     .blue {
1514 |       width: 12%;
1515 |       font-size: 15px;
1516 |       .blue_default {
1517 |         font-size: 12px;
1518 |       }
1519 |     }
1520 |     ::v-deep .num-del {
1521 |       height: 45px;
1522 |       svg {
1523 |         height: 38px;
1524 |         margin-left: -3px;
1525 |         position: relative;
1526 |         top: 5px;
1527 |       }
1528 |     }
1529 |     ::v-deep .def-del {
1530 |       width: 12% !important;
1531 |       svg {
1532 |         margin-top: 6px;
1533 |         height: 31px;
1534 |         margin-left: -3px;
1535 |       }
1536 |     }
1537 | 
1538 |     .key_hide {
1539 |       width: 20% !important;
1540 |       span {
1541 |         padding-left: 0px;
1542 |         font-size: 15px;
1543 |       }
1544 |     }
1545 |     .case {
1546 |     }
1547 |     .space {
1548 |       width: 30%;
1549 |       font-size: 20px;
1550 |     }
1551 |   }
1552 | }
1553 | </style>
1554 | 


--------------------------------------------------------------------------------
/src/components/keyboard/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-virtual-keyboard-cn",
 3 |   "author": "MoNaiZi",
 4 |   "version": "1.3.3",
 5 |   "homepage": "https://github.com/MoNaiZi/vue-virtual-keyboard",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "js",
 9 |     "keywords",
10 |     "中文输入法",
11 |     "虚拟键盘"
12 |   ],
13 |   "scripts": {},
14 |   "dependencies": {},
15 |   "devDependencies": {},
16 |   "eslintConfig": {},
17 |   "browserslist": []
18 | }


--------------------------------------------------------------------------------
/src/dict/baseDict.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "a": "阿啊呵腌嗄吖锕",
  3 |   "e": "额阿俄恶鹅遏鄂厄饿峨扼娥鳄哦蛾噩愕讹锷垩婀鹗萼谔莪腭锇颚呃阏屙苊轭",
  4 |   "ai": "爱埃艾碍癌哀挨矮隘蔼唉皑哎霭捱暧嫒嗳瑷嗌锿砹",
  5 |   "ei": "诶",
  6 |   "xi": "系西席息希习吸喜细析戏洗悉锡溪惜稀袭夕洒晰昔牺腊烯熙媳栖膝隙犀蹊硒兮熄曦禧嬉玺奚汐徙羲铣淅嘻歙熹矽蟋郗唏皙隰樨浠忾蜥檄郄翕阋鳃舾屣葸螅咭粞觋欷僖醯鼷裼穸饩舄禊诶菥蓰",
  7 |   "yi": "一以已意议义益亿易医艺食依移衣异伊仪宜射遗疑毅谊亦疫役忆抑尾乙译翼蛇溢椅沂泄逸蚁夷邑怡绎彝裔姨熠贻矣屹颐倚诣胰奕翌疙弈轶蛾驿壹猗臆弋铱旖漪迤佚翊诒怿痍懿饴峄揖眙镒仡黟肄咿翳挹缢呓刈咦嶷羿钇殪荑薏蜴镱噫癔苡悒嗌瘗衤佾埸圯舣酏劓",
  8 |   "an": "安案按岸暗鞍氨俺胺铵谙庵黯鹌桉埯犴揞厂广",
  9 |   "han": "厂汉韩含旱寒汗涵函喊憾罕焊翰邯撼瀚憨捍酣悍鼾邗颔蚶晗菡旰顸犴焓撖",
 10 |   "ang": "昂仰盎肮",
 11 |   "ao": "奥澳傲熬凹鳌敖遨鏖袄坳翱嗷拗懊岙螯骜獒鏊艹媪廒聱",
 12 |   "wa": "瓦挖娃洼袜蛙凹哇佤娲呙腽",
 13 |   "yu": "于与育余预域予遇奥语誉玉鱼雨渔裕愈娱欲吁舆宇羽逾豫郁寓吾狱喻御浴愉禹俞邪榆愚渝尉淤虞屿峪粥驭瑜禺毓钰隅芋熨瘀迂煜昱汩於臾盂聿竽萸妪腴圄谕觎揄龉谀俣馀庾妤瘐鬻欤鹬阈嵛雩鹆圉蜮伛纡窬窳饫蓣狳肀舁蝓燠",
 14 |   "niu": "牛纽扭钮拗妞忸狃",
 15 |   "o": "哦噢喔",
 16 |   "ba": "把八巴拔伯吧坝爸霸罢芭跋扒叭靶疤笆耙鲅粑岜灞钯捌菝魃茇",
 17 |   "pa": "怕帕爬扒趴琶啪葩耙杷钯筢",
 18 |   "pi": "被批副否皮坏辟啤匹披疲罢僻毗坯脾譬劈媲屁琵邳裨痞癖陂丕枇噼霹吡纰砒铍淠郫埤濞睥芘蚍圮鼙罴蜱疋貔仳庀擗甓陴",
 19 |   "bi": "比必币笔毕秘避闭佛辟壁弊彼逼碧鼻臂蔽拂泌璧庇痹毙弼匕鄙陛裨贲敝蓖吡篦纰俾铋毖筚荸薜婢哔跸濞秕荜愎睥妣芘箅髀畀滗狴萆嬖襞舭",
 20 |   "bai": "百白败摆伯拜柏佰掰呗擘捭稗",
 21 |   "bo": "波博播勃拨薄佛伯玻搏柏泊舶剥渤卜驳簿脖膊簸菠礴箔铂亳钵帛擘饽跛钹趵檗啵鹁擗踣",
 22 |   "bei": "北被备倍背杯勃贝辈悲碑臂卑悖惫蓓陂钡狈呗焙碚褙庳鞴孛鹎邶鐾",
 23 |   "ban": "办版半班般板颁伴搬斑扮拌扳瓣坂阪绊钣瘢舨癍",
 24 |   "pan": "判盘番潘攀盼拚畔胖叛拌蹒磐爿蟠泮袢襻丬",
 25 |   "bin": "份宾频滨斌彬濒殡缤鬓槟摈膑玢镔豳髌傧",
 26 |   "bang": "帮邦彭旁榜棒膀镑绑傍磅蚌谤梆浜蒡",
 27 |   "pang": "旁庞乓磅螃彷滂逄耪",
 28 |   "beng": "泵崩蚌蹦迸绷甭嘣甏堋",
 29 |   "bao": "报保包宝暴胞薄爆炮饱抱堡剥鲍曝葆瀑豹刨褒雹孢苞煲褓趵鸨龅勹",
 30 |   "bu": "不部步布补捕堡埔卜埠簿哺怖钚卟瓿逋晡醭钸",
 31 |   "pu": "普暴铺浦朴堡葡谱埔扑仆蒲曝瀑溥莆圃璞濮菩蹼匍噗氆攵镨攴镤",
 32 |   "mian": "面棉免绵缅勉眠冕娩腼渑湎沔黾宀眄",
 33 |   "po": "破繁坡迫颇朴泊婆泼魄粕鄱珀陂叵笸泺皤钋钷",
 34 |   "fan": "反范犯繁饭泛翻凡返番贩烦拚帆樊藩矾梵蕃钒幡畈蘩蹯燔",
 35 |   "fu": "府服副负富复福夫妇幅付扶父符附腐赴佛浮覆辅傅伏抚赋辐腹弗肤阜袱缚甫氟斧孚敷俯拂俘咐腑孵芙涪釜脯茯馥宓绂讣呋罘麸蝠匐芾蜉跗凫滏蝮驸绋蚨砩桴赙菔呒趺苻拊阝鲋怫稃郛莩幞祓艴黻黼鳆",
 36 |   "ben": "本体奔苯笨夯贲锛畚坌",
 37 |   "feng": "风丰封峰奉凤锋冯逢缝蜂枫疯讽烽俸沣酆砜葑唪",
 38 |   "bian": "变便边编遍辩鞭辨贬匾扁卞汴辫砭苄蝙鳊弁窆笾煸褊碥忭缏",
 39 |   "pian": "便片篇偏骗翩扁骈胼蹁谝犏缏",
 40 |   "zhen": "镇真针圳振震珍阵诊填侦臻贞枕桢赈祯帧甄斟缜箴疹砧榛鸩轸稹溱蓁胗椹朕畛浈",
 41 |   "biao": "表标彪镖裱飚膘飙镳婊骠飑杓髟鳔灬瘭",
 42 |   "piao": "票朴漂飘嫖瓢剽缥殍瞟骠嘌莩螵",
 43 |   "huo": "和活或货获火伙惑霍祸豁嚯藿锪蠖钬耠镬夥灬劐攉",
 44 |   "bie": "别鳖憋瘪蹩",
 45 |   "min": "民敏闽闵皿泯岷悯珉抿黾缗玟愍苠鳘",
 46 |   "fen": "分份纷奋粉氛芬愤粪坟汾焚酚吩忿棼玢鼢瀵偾鲼",
 47 |   "bing": "并病兵冰屏饼炳秉丙摒柄槟禀枋邴冫",
 48 |   "geng": "更耕颈庚耿梗埂羹哽赓绠鲠",
 49 |   "fang": "方放房防访纺芳仿坊妨肪邡舫彷枋鲂匚钫",
 50 |   "xian": "现先县见线限显险献鲜洗宪纤陷闲贤仙衔掀咸嫌掺羡弦腺痫娴舷馅酰铣冼涎暹籼锨苋蚬跹岘藓燹鹇氙莶霰跣猃彡祆筅",
 51 |   "fou": "不否缶",
 52 |   "ca": "拆擦嚓礤",
 53 |   "cha": "查察差茶插叉刹茬楂岔诧碴嚓喳姹杈汊衩搽槎镲苴檫馇锸猹",
 54 |   "cai": "才采财材菜彩裁蔡猜踩睬",
 55 |   "can": "参残餐灿惨蚕掺璨惭粲孱骖黪",
 56 |   "shen": "信深参身神什审申甚沈伸慎渗肾绅莘呻婶娠砷蜃哂椹葚吲糁渖诜谂矧胂",
 57 |   "cen": "参岑涔",
 58 |   "san": "三参散伞叁糁馓毵",
 59 |   "cang": "藏仓苍沧舱臧伧",
 60 |   "zang": "藏脏葬赃臧奘驵",
 61 |   "chen": "称陈沈沉晨琛臣尘辰衬趁忱郴宸谌碜嗔抻榇伧谶龀肜",
 62 |   "cao": "草操曹槽糙嘈漕螬艚屮",
 63 |   "ce": "策测册侧厕栅恻",
 64 |   "ze": "责则泽择侧咋啧仄箦赜笮舴昃迮帻",
 65 |   "zhai": "债择齐宅寨侧摘窄斋祭翟砦瘵哜",
 66 |   "dao": "到道导岛倒刀盗稻蹈悼捣叨祷焘氘纛帱忉",
 67 |   "ceng": "层曾蹭噌",
 68 |   "zha": "查扎炸诈闸渣咋乍榨楂札栅眨咤柞喳喋铡蚱吒怍砟揸痄哳齄",
 69 |   "chai": "差拆柴钗豺侪虿瘥",
 70 |   "ci": "次此差词辞刺瓷磁兹慈茨赐祠伺雌疵鹚糍呲粢",
 71 |   "zi": "资自子字齐咨滋仔姿紫兹孜淄籽梓鲻渍姊吱秭恣甾孳訾滓锱辎趑龇赀眦缁呲笫谘嵫髭茈粢觜耔",
 72 |   "cuo": "措错磋挫搓撮蹉锉厝嵯痤矬瘥脞鹾",
 73 |   "chan": "产单阐崭缠掺禅颤铲蝉搀潺蟾馋忏婵孱觇廛谄谗澶骣羼躔蒇冁",
 74 |   "shan": "山单善陕闪衫擅汕扇掺珊禅删膳缮赡鄯栅煽姗跚鳝嬗潸讪舢苫疝掸膻钐剡蟮芟埏彡骟",
 75 |   "zhan": "展战占站崭粘湛沾瞻颤詹斩盏辗绽毡栈蘸旃谵搌",
 76 |   "xin": "新心信辛欣薪馨鑫芯锌忻莘昕衅歆囟忄镡",
 77 |   "lian": "联连练廉炼脸莲恋链帘怜涟敛琏镰濂楝鲢殓潋裢裣臁奁莶蠊蔹",
 78 |   "chang": "场长厂常偿昌唱畅倡尝肠敞倘猖娼淌裳徜昶怅嫦菖鲳阊伥苌氅惝鬯",
 79 |   "zhang": "长张章障涨掌帐胀彰丈仗漳樟账杖璋嶂仉瘴蟑獐幛鄣嫜",
 80 |   "chao": "超朝潮炒钞抄巢吵剿绰嘲晁焯耖怊",
 81 |   "zhao": "着照招找召朝赵兆昭肇罩钊沼嘲爪诏濯啁棹笊",
 82 |   "zhou": "调州周洲舟骤轴昼宙粥皱肘咒帚胄绉纣妯啁诌繇碡籀酎荮",
 83 |   "che": "车彻撤尺扯澈掣坼砗屮",
 84 |   "ju": "车局据具举且居剧巨聚渠距句拒俱柜菊拘炬桔惧矩鞠驹锯踞咀瞿枸掬沮莒橘飓疽钜趄踽遽琚龃椐苣裾榘狙倨榉苴讵雎锔窭鞫犋屦醵",
 85 |   "cheng": "成程城承称盛抢乘诚呈净惩撑澄秤橙骋逞瞠丞晟铛埕塍蛏柽铖酲裎枨",
 86 |   "rong": "容荣融绒溶蓉熔戎榕茸冗嵘肜狨蝾",
 87 |   "sheng": "生声升胜盛乘圣剩牲甸省绳笙甥嵊晟渑眚",
 88 |   "deng": "等登邓灯澄凳瞪蹬噔磴嶝镫簦戥",
 89 |   "zhi": "制之治质职只志至指织支值知识直致执置止植纸拓智殖秩旨址滞氏枝芝脂帜汁肢挚稚酯掷峙炙栉侄芷窒咫吱趾痔蜘郅桎雉祉郦陟痣蛭帙枳踯徵胝栀贽祗豸鸷摭轵卮轾彘觯絷跖埴夂黹忮骘膣踬",
 90 |   "zheng": "政正证争整征郑丁症挣蒸睁铮筝拯峥怔诤狰徵钲",
 91 |   "tang": "堂唐糖汤塘躺趟倘棠烫淌膛搪镗傥螳溏帑羰樘醣螗耥铴瑭",
 92 |   "chi": "持吃池迟赤驰尺斥齿翅匙痴耻炽侈弛叱啻坻眙嗤墀哧茌豉敕笞饬踟蚩柢媸魑篪褫彳鸱螭瘛眵傺",
 93 |   "shi": "是时实事市十使世施式势视识师史示石食始士失适试什泽室似诗饰殖释驶氏硕逝湿蚀狮誓拾尸匙仕柿矢峙侍噬嗜栅拭嘘屎恃轼虱耆舐莳铈谥炻豕鲥饣螫酾筮埘弑礻蓍鲺贳",
 94 |   "qi": "企其起期气七器汽奇齐启旗棋妻弃揭枝歧欺骑契迄亟漆戚岂稽岐琦栖缉琪泣乞砌祁崎绮祺祈凄淇杞脐麒圻憩芪伎俟畦耆葺沏萋骐鳍綦讫蕲屺颀亓碛柒啐汔綮萁嘁蛴槭欹芑桤丌蜞",
 95 |   "chuai": "揣踹啜搋膪",
 96 |   "tuo": "托脱拓拖妥驼陀沱鸵驮唾椭坨佗砣跎庹柁橐乇铊沲酡鼍箨柝",
 97 |   "duo": "多度夺朵躲铎隋咄堕舵垛惰哆踱跺掇剁柁缍沲裰哚隳",
 98 |   "xue": "学血雪削薛穴靴谑噱鳕踅泶彐",
 99 |   "chong": "重种充冲涌崇虫宠忡憧舂茺铳艟",
100 |   "chou": "筹抽绸酬愁丑臭仇畴稠瞅踌惆俦瘳雠帱",
101 |   "qiu": "求球秋丘邱仇酋裘龟囚遒鳅虬蚯泅楸湫犰逑巯艽俅蝤赇鼽糗",
102 |   "xiu": "修秀休宿袖绣臭朽锈羞嗅岫溴庥馐咻髹鸺貅",
103 |   "chu": "出处础初助除储畜触楚厨雏矗橱锄滁躇怵绌搐刍蜍黜杵蹰亍樗憷楮",
104 |   "tuan": "团揣湍疃抟彖",
105 |   "zhui": "追坠缀揣椎锥赘惴隹骓缒",
106 |   "chuan": "传川船穿串喘椽舛钏遄氚巛舡",
107 |   "zhuan": "专转传赚砖撰篆馔啭颛",
108 |   "yuan": "元员院原源远愿园援圆缘袁怨渊苑宛冤媛猿垣沅塬垸鸳辕鸢瑗圜爰芫鼋橼螈眢箢掾",
109 |   "cuan": "窜攒篡蹿撺爨汆镩",
110 |   "chuang": "创床窗闯幢疮怆",
111 |   "zhuang": "装状庄壮撞妆幢桩奘僮戆",
112 |   "chui": "吹垂锤炊椎陲槌捶棰",
113 |   "chun": "春纯醇淳唇椿蠢鹑朐莼肫蝽",
114 |   "zhun": "准屯淳谆肫窀",
115 |   "cu": "促趋趣粗簇醋卒蹴猝蹙蔟殂徂",
116 |   "dun": "吨顿盾敦蹲墩囤沌钝炖盹遁趸砘礅",
117 |   "qu": "区去取曲趋渠趣驱屈躯衢娶祛瞿岖龋觑朐蛐癯蛆苣阒诎劬蕖蘧氍黢蠼璩麴鸲磲",
118 |   "xu": "需许续须序徐休蓄畜虚吁绪叙旭邪恤墟栩絮圩婿戌胥嘘浒煦酗诩朐盱蓿溆洫顼勖糈砉醑",
119 |   "xv": "需许续须序徐休蓄畜虚吁绪叙旭邪恤墟栩絮圩婿戌胥嘘浒煦酗诩朐盱蓿溆洫顼勖糈砉醑",
120 |   "chuo": "辍绰戳淖啜龊踔辶",
121 |   "zu": "组族足祖租阻卒俎诅镞菹",
122 |   "ji": "济机其技基记计系期际及集级几给积极己纪即继击既激绩急奇吉季齐疾迹鸡剂辑籍寄挤圾冀亟寂暨脊跻肌稽忌饥祭缉棘矶汲畸姬藉瘠骥羁妓讥稷蓟悸嫉岌叽伎鲫诘楫荠戟箕霁嵇觊麂畿玑笈犄芨唧屐髻戢佶偈笄跽蒺乩咭赍嵴虮掎齑殛鲚剞洎丌墼蕺彐芰哜",
123 |   "cong": "从丛匆聪葱囱琮淙枞骢苁璁",
124 |   "zong": "总从综宗纵踪棕粽鬃偬枞腙",
125 |   "cou": "凑辏腠楱",
126 |   "cui": "衰催崔脆翠萃粹摧璀瘁悴淬啐隹毳榱",
127 |   "wei": "为位委未维卫围违威伟危味微唯谓伪慰尾魏韦胃畏帷喂巍萎蔚纬潍尉渭惟薇苇炜圩娓诿玮崴桅偎逶倭猥囗葳隗痿猬涠嵬韪煨艉隹帏闱洧沩隈鲔軎",
128 |   "cun": "村存寸忖皴",
129 |   "zuo": "作做座左坐昨佐琢撮祚柞唑嘬酢怍笮阼胙",
130 |   "zuan": "钻纂攥缵躜",
131 |   "da": "大达打答搭沓瘩惮嗒哒耷鞑靼褡笪怛妲",
132 |   "dai": "大代带待贷毒戴袋歹呆隶逮岱傣棣怠殆黛甙埭诒绐玳呔迨",
133 |   "tai": "大台太态泰抬胎汰钛苔薹肽跆邰鲐酞骀炱",
134 |   "ta": "他它她拓塔踏塌榻沓漯獭嗒挞蹋趿遢铊鳎溻闼",
135 |   "dan": "但单石担丹胆旦弹蛋淡诞氮郸耽殚惮儋眈疸澹掸膻啖箪聃萏瘅赕",
136 |   "lu": "路六陆录绿露鲁卢炉鹿禄赂芦庐碌麓颅泸卤潞鹭辘虏璐漉噜戮鲈掳橹轳逯渌蓼撸鸬栌氇胪镥簏舻辂垆",
137 |   "tan": "谈探坦摊弹炭坛滩贪叹谭潭碳毯瘫檀痰袒坍覃忐昙郯澹钽锬",
138 |   "ren": "人任认仁忍韧刃纫饪妊荏稔壬仞轫衽",
139 |   "jie": "家结解价界接节她届介阶街借杰洁截姐揭捷劫戒皆竭桔诫楷秸睫藉拮芥诘碣嗟颉蚧孑婕疖桀讦疥偈羯袷哜喈卩鲒骱",
140 |   "yan": "研严验演言眼烟沿延盐炎燕岩宴艳颜殷彦掩淹阎衍铅雁咽厌焰堰砚唁焉晏檐蜒奄俨腌妍谚兖筵焱偃闫嫣鄢湮赝胭琰滟阉魇酽郾恹崦芫剡鼹菸餍埏谳讠厣罨",
141 |   "dang": "当党档荡挡宕砀铛裆凼菪谠",
142 |   "tao": "套讨跳陶涛逃桃萄淘掏滔韬叨洮啕绦饕鼗",
143 |   "tiao": "条调挑跳迢眺苕窕笤佻啁粜髫铫祧龆蜩鲦",
144 |   "te": "特忑忒铽慝",
145 |   "de": "的地得德底锝",
146 |   "dei": "得",
147 |   "di": "的地第提低底抵弟迪递帝敌堤蒂缔滴涤翟娣笛棣荻谛狄邸嘀砥坻诋嫡镝碲骶氐柢籴羝睇觌",
148 |   "ti": "体提题弟替梯踢惕剔蹄棣啼屉剃涕锑倜悌逖嚏荑醍绨鹈缇裼",
149 |   "tui": "推退弟腿褪颓蜕忒煺",
150 |   "you": "有由又优游油友右邮尤忧幼犹诱悠幽佑釉柚铀鱿囿酉攸黝莠猷蝣疣呦蚴莸莜铕宥繇卣牖鼬尢蚰侑",
151 |   "dian": "电点店典奠甸碘淀殿垫颠滇癫巅惦掂癜玷佃踮靛钿簟坫阽",
152 |   "tian": "天田添填甜甸恬腆佃舔钿阗忝殄畋栝掭",
153 |   "zhu": "主术住注助属逐宁著筑驻朱珠祝猪诸柱竹铸株瞩嘱贮煮烛苎褚蛛拄铢洙竺蛀渚伫杼侏澍诛茱箸炷躅翥潴邾槠舳橥丶瘃麈疰",
154 |   "nian": "年念酿辗碾廿捻撵拈蔫鲶埝鲇辇黏",
155 |   "diao": "调掉雕吊钓刁貂凋碉鲷叼铫铞",
156 |   "yao": "要么约药邀摇耀腰遥姚窑瑶咬尧钥谣肴夭侥吆疟妖幺杳舀窕窈曜鹞爻繇徭轺铫鳐崾珧",
157 |   "die": "跌叠蝶迭碟爹谍牒耋佚喋堞瓞鲽垤揲蹀",
158 |   "she": "设社摄涉射折舍蛇拾舌奢慑赦赊佘麝歙畲厍猞揲滠",
159 |   "ye": "业也夜叶射野液冶喝页爷耶邪咽椰烨掖拽曳晔谒腋噎揶靥邺铘揲",
160 |   "xie": "些解协写血叶谢械鞋胁斜携懈契卸谐泄蟹邪歇泻屑挟燮榭蝎撷偕亵楔颉缬邂鲑瀣勰榍薤绁渫廨獬躞",
161 |   "zhe": "这者着著浙折哲蔗遮辙辄柘锗褶蜇蛰鹧谪赭摺乇磔螫",
162 |   "ding": "定订顶丁鼎盯钉锭叮仃铤町酊啶碇腚疔玎耵",
163 |   "diu": "丢铥",
164 |   "ting": "听庭停厅廷挺亭艇婷汀铤烃霆町蜓葶梃莛",
165 |   "dong": "动东董冬洞懂冻栋侗咚峒氡恫胴硐垌鸫岽胨",
166 |   "tong": "同通统童痛铜桶桐筒彤侗佟潼捅酮砼瞳恸峒仝嗵僮垌茼",
167 |   "zhong": "中重种众终钟忠仲衷肿踵冢盅蚣忪锺舯螽夂",
168 |   "zhon": "中重种众终钟忠仲衷肿踵冢盅蚣忪锺舯螽夂",
169 |   "zho": "钟中调种州重周洲舟忠肿众终仲骤衷轴昼宙粥皱肘咒帚胄绉纣妯啁诌繇碡籀酎荮踵冢盅蚣忪锺舯螽夂",
170 |   "dou": "都斗读豆抖兜陡逗窦渎蚪痘蔸钭篼",
171 |   "du": "度都独督读毒渡杜堵赌睹肚镀渎笃竺嘟犊妒牍蠹椟黩芏髑",
172 |   "duan": "断段短端锻缎煅椴簖",
173 |   "dui": "对队追敦兑堆碓镦怼憝",
174 |   "rui": "瑞兑锐睿芮蕊蕤蚋枘",
175 |   "yue": "月说约越乐跃兑阅岳粤悦曰钥栎钺樾瀹龠哕刖",
176 |   "tun": "吞屯囤褪豚臀饨暾氽",
177 |   "hui": "会回挥汇惠辉恢徽绘毁慧灰贿卉悔秽溃荟晖彗讳诲珲堕诙蕙晦睢麾烩茴喙桧蛔洄浍虺恚蟪咴隳缋哕",
178 |   "wu": "务物无五武午吴舞伍污乌误亡恶屋晤悟吾雾芜梧勿巫侮坞毋诬呜钨邬捂鹜兀婺妩於戊鹉浯蜈唔骛仵焐芴鋈庑鼯牾怃圬忤痦迕杌寤阢",
179 |   "ya": "亚压雅牙押鸭呀轧涯崖邪芽哑讶鸦娅衙丫蚜碣垭伢氩桠琊揠吖睚痖疋迓岈砑",
180 |   "he": "和合河何核盖贺喝赫荷盒鹤吓呵苛禾菏壑褐涸阂阖劾诃颌嗬貉曷翮纥盍",
181 |   "wo": "我握窝沃卧挝涡斡渥幄蜗喔倭莴龌肟硪",
182 |   "en": "恩摁蒽",
183 |   "n": "嗯唔",
184 |   "er": "而二尔儿耳迩饵洱贰铒珥佴鸸鲕",
185 |   "fa": "发法罚乏伐阀筏砝垡珐",
186 |   "quan": "全权券泉圈拳劝犬铨痊诠荃醛蜷颧绻筌鬈悛辁畎",
187 |   "fei": "费非飞肥废菲肺啡沸匪斐蜚妃诽扉翡霏吠绯腓痱芾淝悱狒榧砩鲱篚镄",
188 |   "pei": "配培坏赔佩陪沛裴胚妃霈淠旆帔呸醅辔锫",
189 |   "ping": "平评凭瓶冯屏萍苹乒坪枰娉俜鲆",
190 |   "fo": "佛",
191 |   "hu": "和护许户核湖互乎呼胡戏忽虎沪糊壶葫狐蝴弧瑚浒鹄琥扈唬滹惚祜囫斛笏芴醐猢怙唿戽槲觳煳鹕冱瓠虍岵鹱烀轷",
192 |   "ga": "夹咖嘎尬噶旮伽尕钆尜",
193 |   "ge": "个合各革格歌哥盖隔割阁戈葛鸽搁胳舸疙铬骼蛤咯圪镉颌仡硌嗝鬲膈纥袼搿塥哿虼",
194 |   "ha": "哈蛤铪",
195 |   "xia": "下夏峡厦辖霞夹虾狭吓侠暇遐瞎匣瑕唬呷黠硖罅狎瘕柙",
196 |   "gai": "改该盖概溉钙丐芥赅垓陔戤",
197 |   "hai": "海还害孩亥咳骸骇氦嗨胲醢",
198 |   "gan": "干感赶敢甘肝杆赣乾柑尴竿秆橄矸淦苷擀酐绀泔坩旰疳澉",
199 |   "gang": "港钢刚岗纲冈杠缸扛肛罡戆筻",
200 |   "jiang": "将强江港奖讲降疆蒋姜浆匠酱僵桨绛缰犟豇礓洚茳糨耩",
201 |   "hang": "行航杭巷夯吭桁沆绗颃",
202 |   "gong": "工公共供功红贡攻宫巩龚恭拱躬弓汞蚣珙觥肱廾",
203 |   "hong": "红宏洪轰虹鸿弘哄烘泓訇蕻闳讧荭黉薨",
204 |   "guang": "广光逛潢犷胱咣桄",
205 |   "qiong": "穷琼穹邛茕筇跫蛩銎",
206 |   "gao": "高告搞稿膏糕镐皋羔锆杲郜睾诰藁篙缟槁槔",
207 |   "hao": "好号毫豪耗浩郝皓昊皋蒿壕灏嚎濠蚝貉颢嗥薅嚆",
208 |   "li": "理力利立里李历例离励礼丽黎璃厉厘粒莉梨隶栗荔沥犁漓哩狸藜罹篱鲤砺吏澧俐骊溧砾莅锂笠蠡蛎痢雳俪傈醴栎郦俚枥喱逦娌鹂戾砬唳坜疠蜊黧猁鬲粝蓠呖跞疬缡鲡鳢嫠詈悝苈篥轹",
209 |   "jia": "家加价假佳架甲嘉贾驾嫁夹稼钾挟拮迦伽颊浃枷戛荚痂颉镓笳珈岬胛袈郏葭袷瘕铗跏蛱恝哿",
210 |   "luo": "落罗络洛逻螺锣骆萝裸漯烙摞骡咯箩珞捋荦硌雒椤镙跞瘰泺脶猡倮蠃",
211 |   "ke": "可科克客刻课颗渴壳柯棵呵坷恪苛咳磕珂稞瞌溘轲窠嗑疴蝌岢铪颏髁蚵缂氪骒钶锞",
212 |   "qia": "卡恰洽掐髂袷咭葜",
213 |   "gei": "给",
214 |   "gen": "根跟亘艮哏茛",
215 |   "hen": "很狠恨痕哏",
216 |   "gou": "构购够句沟狗钩拘勾苟垢枸篝佝媾诟岣彀缑笱鞲觏遘",
217 |   "kou": "口扣寇叩抠佝蔻芤眍筘",
218 |   "gu": "股古顾故固鼓骨估谷贾姑孤雇辜菇沽咕呱锢钴箍汩梏痼崮轱鸪牯蛊诂毂鹘菰罟嘏臌觚瞽蛄酤牿鲴",
219 |   "pai": "牌排派拍迫徘湃俳哌蒎",
220 |   "gua": "括挂瓜刮寡卦呱褂剐胍诖鸹栝呙",
221 |   "tou": "投头透偷愉骰亠",
222 |   "guai": "怪拐乖",
223 |   "kuai": "会快块筷脍蒯侩浍郐蒉狯哙",
224 |   "guan": "关管观馆官贯冠惯灌罐莞纶棺斡矜倌鹳鳏盥掼涫",
225 |   "wan": "万完晚湾玩碗顽挽弯蔓丸莞皖宛婉腕蜿惋烷琬畹豌剜纨绾脘菀芄箢",
226 |   "ne": "呢哪呐讷疒",
227 |   "gui": "规贵归轨桂柜圭鬼硅瑰跪龟匮闺诡癸鳜桧皈鲑刽晷傀眭妫炅庋簋刿宄匦",
228 |   "jun": "军均俊君峻菌竣钧骏龟浚隽郡筠皲麇捃",
229 |   "jiong": "窘炯迥炅冂扃",
230 |   "jue": "决绝角觉掘崛诀獗抉爵嚼倔厥蕨攫珏矍蹶谲镢鳜噱桷噘撅橛孓觖劂爝",
231 |   "gun": "滚棍辊衮磙鲧绲",
232 |   "hun": "婚混魂浑昏棍珲荤馄诨溷阍",
233 |   "guo": "国过果郭锅裹帼涡椁囗蝈虢聒埚掴猓崞蜾呙馘",
234 |   "hei": "黑嘿嗨",
235 |   "kan": "看刊勘堪坎砍侃嵌槛瞰阚龛戡凵莰",
236 |   "heng": "衡横恒亨哼珩桁蘅",
237 |   "mo": "万没么模末冒莫摩墨默磨摸漠脉膜魔沫陌抹寞蘑摹蓦馍茉嘿谟秣蟆貉嫫镆殁耱嬷麽瘼貊貘",
238 |   "peng": "鹏朋彭膨蓬碰苹棚捧亨烹篷澎抨硼怦砰嘭蟛堋",
239 |   "hou": "后候厚侯猴喉吼逅篌糇骺後鲎瘊堠",
240 |   "hua": "化华划话花画滑哗豁骅桦猾铧砉",
241 |   "huai": "怀坏淮徊槐踝",
242 |   "huan": "还环换欢患缓唤焕幻痪桓寰涣宦垸洹浣豢奂郇圜獾鲩鬟萑逭漶锾缳擐",
243 |   "xun": "讯训迅孙寻询循旬巡汛勋逊熏徇浚殉驯鲟薰荀浔洵峋埙巽郇醺恂荨窨蕈曛獯",
244 |   "huang": "黄荒煌皇凰慌晃潢谎惶簧璜恍幌湟蝗磺隍徨遑肓篁鳇蟥癀",
245 |   "nai": "能乃奶耐奈鼐萘氖柰佴艿",
246 |   "luan": "乱卵滦峦鸾栾銮挛孪脔娈",
247 |   "qie": "切且契窃茄砌锲怯伽惬妾趄挈郄箧慊",
248 |   "jian": "建间件见坚检健监减简艰践兼鉴键渐柬剑尖肩舰荐箭浅剪俭碱茧奸歼拣捡煎贱溅槛涧堑笺谏饯锏缄睑謇蹇腱菅翦戬毽笕犍硷鞯牮枧湔鲣囝裥踺搛缣鹣蒹谫僭戋趼楗",
249 |   "nan": "南难男楠喃囡赧腩囝蝻",
250 |   "qian": "前千钱签潜迁欠纤牵浅遣谦乾铅歉黔谴嵌倩钳茜虔堑钎骞阡掮钤扦芊犍荨仟芡悭缱佥愆褰凵肷岍搴箝慊椠",
251 |   "qiang": "强抢疆墙枪腔锵呛羌蔷襁羟跄樯戕嫱戗炝镪锖蜣",
252 |   "xiang": "向项相想乡象响香降像享箱羊祥湘详橡巷翔襄厢镶飨饷缃骧芗庠鲞葙蟓",
253 |   "jiao": "教交较校角觉叫脚缴胶轿郊焦骄浇椒礁佼蕉娇矫搅绞酵剿嚼饺窖跤蛟侥狡姣皎茭峤铰醮鲛湫徼鹪僬噍艽挢敫",
254 |   "zhuo": "着著缴桌卓捉琢灼浊酌拙茁涿镯淖啄濯焯倬擢斫棹诼浞禚",
255 |   "qiao": "桥乔侨巧悄敲俏壳雀瞧翘窍峭锹撬荞跷樵憔鞘橇峤诮谯愀鞒硗劁缲",
256 |   "xiao": "小效销消校晓笑肖削孝萧俏潇硝宵啸嚣霄淆哮筱逍姣箫骁枭哓绡蛸崤枵魈",
257 |   "si": "司四思斯食私死似丝饲寺肆撕泗伺嗣祀厮驷嘶锶俟巳蛳咝耜笥纟糸鸶缌澌姒汜厶兕",
258 |   "kai": "开凯慨岂楷恺揩锴铠忾垲剀锎蒈",
259 |   "jin": "进金今近仅紧尽津斤禁锦劲晋谨筋巾浸襟靳瑾烬缙钅矜觐堇馑荩噤廑妗槿赆衿卺",
260 |   "qin": "亲勤侵秦钦琴禽芹沁寝擒覃噙矜嗪揿溱芩衾廑锓吣檎螓",
261 |   "jing": "经京精境竞景警竟井惊径静劲敬净镜睛晶颈荆兢靖泾憬鲸茎腈菁胫阱旌粳靓痉箐儆迳婧肼刭弪獍",
262 |   "ying": "应营影英景迎映硬盈赢颖婴鹰荧莹樱瑛蝇萦莺颍膺缨瀛楹罂荥萤鹦滢蓥郢茔嘤璎嬴瘿媵撄潆",
263 |   "jiu": "就究九酒久救旧纠舅灸疚揪咎韭玖臼柩赳鸠鹫厩啾阄桕僦鬏",
264 |   "zui": "最罪嘴醉咀蕞觜",
265 |   "juan": "卷捐圈眷娟倦绢隽镌涓鹃鄄蠲狷锩桊",
266 |   "suan": "算酸蒜狻",
267 |   "yun": "员运云允孕蕴韵酝耘晕匀芸陨纭郧筠恽韫郓氲殒愠昀菀狁",
268 |   "qun": "群裙逡麇",
269 |   "ka": "卡喀咖咔咯佧胩",
270 |   "kang": "康抗扛慷炕亢糠伉钪闶",
271 |   "keng": "坑铿吭",
272 |   "kao": "考靠烤拷铐栲尻犒",
273 |   "ken": "肯垦恳啃龈裉",
274 |   "yin": "因引银印音饮阴隐姻殷淫尹荫吟瘾寅茵圻垠鄞湮蚓氤胤龈窨喑铟洇狺夤廴吲霪茚堙",
275 |   "kong": "空控孔恐倥崆箜",
276 |   "ku": "苦库哭酷裤枯窟挎骷堀绔刳喾",
277 |   "kua": "跨夸垮挎胯侉",
278 |   "kui": "亏奎愧魁馈溃匮葵窥盔逵睽馗聩喟夔篑岿喹揆隗傀暌跬蒉愦悝蝰",
279 |   "kuan": "款宽髋",
280 |   "kuang": "况矿框狂旷眶匡筐邝圹哐贶夼诳诓纩",
281 |   "que": "确却缺雀鹊阙瘸榷炔阕悫",
282 |   "kun": "困昆坤捆琨锟鲲醌髡悃阃",
283 |   "kuo": "扩括阔廓蛞",
284 |   "la": "拉落垃腊啦辣蜡喇剌旯砬邋瘌",
285 |   "lai": "来莱赖睐徕籁涞赉濑癞崃疠铼",
286 |   "lan": "兰览蓝篮栏岚烂滥缆揽澜拦懒榄斓婪阑褴罱啉谰镧漤",
287 |   "lin": "林临邻赁琳磷淋麟霖鳞凛拎遴蔺吝粼嶙躏廪檩啉辚膦瞵懔",
288 |   "lang": "浪朗郎廊狼琅榔螂阆锒莨啷蒗稂",
289 |   "liang": "量两粮良辆亮梁凉谅粱晾靓踉莨椋魉墚",
290 |   "lao": "老劳落络牢捞涝烙姥佬崂唠酪潦痨醪铑铹栳耢",
291 |   "mu": "目模木亩幕母牧莫穆姆墓慕牟牡募睦缪沐暮拇姥钼苜仫毪坶",
292 |   "le": "了乐勒肋叻鳓嘞仂泐",
293 |   "lei": "类累雷勒泪蕾垒磊擂镭肋羸耒儡嫘缧酹嘞诔檑",
294 |   "sui": "随岁虽碎尿隧遂髓穗绥隋邃睢祟濉燧谇眭荽",
295 |   "lie": "列烈劣裂猎冽咧趔洌鬣埒捩躐",
296 |   "leng": "冷愣棱楞塄",
297 |   "ling": "领令另零灵龄陵岭凌玲铃菱棱伶羚苓聆翎泠瓴囹绫呤棂蛉酃鲮柃",
298 |   "lia": "俩",
299 |   "liao": "了料疗辽廖聊寥缪僚燎缭撂撩嘹潦镣寮蓼獠钌尥鹩",
300 |   "liu": "流刘六留柳瘤硫溜碌浏榴琉馏遛鎏骝绺镏旒熘鹨锍",
301 |   "lun": "论轮伦仑纶沦抡囵",
302 |   "lv": "率律旅绿虑履吕铝屡氯缕滤侣驴榈闾偻褛捋膂稆",
303 |   "lou": "楼露漏陋娄搂篓喽镂偻瘘髅耧蝼嵝蒌",
304 |   "mao": "贸毛矛冒貌茂茅帽猫髦锚懋袤牦卯铆耄峁瑁蟊茆蝥旄泖昴瞀",
305 |   "long": "龙隆弄垄笼拢聋陇胧珑窿茏咙砻垅泷栊癃",
306 |   "nong": "农浓弄脓侬哝",
307 |   "shuang": "双爽霜孀泷",
308 |   "shu": "术书数属树输束述署朱熟殊蔬舒疏鼠淑叔暑枢墅俞曙抒竖蜀薯梳戍恕孰沭赎庶漱塾倏澍纾姝菽黍腧秫毹殳疋摅",
309 |   "shuai": "率衰帅摔甩蟀",
310 |   "lve": "略掠锊",
311 |   "ma": "么马吗摩麻码妈玛嘛骂抹蚂唛蟆犸杩",
312 |   "me": "么麽",
313 |   "mai": "买卖麦迈脉埋霾荬劢",
314 |   "man": "满慢曼漫埋蔓瞒蛮鳗馒幔谩螨熳缦镘颟墁鞔",
315 |   "mi": "米密秘迷弥蜜谜觅靡泌眯麋猕谧咪糜宓汨醚嘧弭脒冖幂祢縻蘼芈糸敉",
316 |   "men": "们门闷瞒汶扪焖懑鞔钔",
317 |   "mang": "忙盲茫芒氓莽蟒邙硭漭",
318 |   "meng": "蒙盟梦猛孟萌氓朦锰檬勐懵蟒蜢虻黾蠓艨甍艋瞢礞",
319 |   "miao": "苗秒妙描庙瞄缪渺淼藐缈邈鹋杪眇喵",
320 |   "mou": "某谋牟缪眸哞鍪蛑侔厶",
321 |   "miu": "缪谬",
322 |   "mei": "美没每煤梅媒枚妹眉魅霉昧媚玫酶镁湄寐莓袂楣糜嵋镅浼猸鹛",
323 |   "wen": "文问闻稳温纹吻蚊雯紊瘟汶韫刎璺玟阌",
324 |   "mie": "灭蔑篾乜咩蠛",
325 |   "ming": "明名命鸣铭冥茗溟酩瞑螟暝",
326 |   "na": "内南那纳拿哪娜钠呐捺衲镎肭",
327 |   "nei": "内那哪馁",
328 |   "nuo": "难诺挪娜糯懦傩喏搦锘",
329 |   "ruo": "若弱偌箬",
330 |   "nang": "囊馕囔曩攮",
331 |   "nao": "脑闹恼挠瑙淖孬垴铙桡呶硇猱蛲",
332 |   "ni": "你尼呢泥疑拟逆倪妮腻匿霓溺旎昵坭铌鲵伲怩睨猊",
333 |   "nen": "嫩恁",
334 |   "neng": "能",
335 |   "nin": "您恁",
336 |   "niao": "鸟尿溺袅脲茑嬲",
337 |   "nie": "摄聂捏涅镍孽捻蘖啮蹑嗫臬镊颞乜陧",
338 |   "niang": "娘酿",
339 |   "ning": "宁凝拧泞柠咛狞佞聍甯",
340 |   "nu": "努怒奴弩驽帑孥胬",
341 |   "nv": "女钕衄恧",
342 |   "ru": "入如女乳儒辱汝茹褥孺濡蠕嚅缛溽铷洳薷襦颥蓐",
343 |   "nuan": "暖",
344 |   "nve": "虐疟",
345 |   "re": "热若惹喏",
346 |   "ou": "区欧偶殴呕禺藕讴鸥瓯沤耦怄",
347 |   "pao": "跑炮泡抛刨袍咆疱庖狍匏脬",
348 |   "pou": "剖掊裒",
349 |   "pen": "喷盆湓",
350 |   "pie": "瞥撇苤氕丿",
351 |   "pin": "品贫聘频拼拚颦姘嫔榀牝",
352 |   "se": "色塞瑟涩啬穑铯槭",
353 |   "qing": "情青清请亲轻庆倾顷卿晴氢擎氰罄磬蜻箐鲭綮苘黥圊檠謦",
354 |   "zan": "赞暂攒堑昝簪糌瓒錾趱拶",
355 |   "shao": "少绍召烧稍邵哨韶捎勺梢鞘芍苕劭艄筲杓潲",
356 |   "sao": "扫骚嫂梢缫搔瘙臊埽缲鳋",
357 |   "sha": "沙厦杀纱砂啥莎刹杉傻煞鲨霎嗄痧裟挲铩唼歃",
358 |   "xuan": "县选宣券旋悬轩喧玄绚渲璇炫萱癣漩眩暄煊铉楦泫谖痃碹揎镟儇",
359 |   "ran": "然染燃冉苒髯蚺",
360 |   "rang": "让壤攘嚷瓤穰禳",
361 |   "rao": "绕扰饶娆桡荛",
362 |   "reng": "仍扔",
363 |   "ri": "日",
364 |   "rou": "肉柔揉糅鞣蹂",
365 |   "ruan": "软阮朊",
366 |   "run": "润闰",
367 |   "sa": "萨洒撒飒卅仨脎",
368 |   "suo": "所些索缩锁莎梭琐嗦唆唢娑蓑羧挲桫嗍睃",
369 |   "sai": "思赛塞腮噻鳃",
370 |   "shui": "说水税谁睡氵",
371 |   "sang": "桑丧嗓搡颡磉",
372 |   "sen": "森",
373 |   "seng": "僧",
374 |   "shai": "筛晒",
375 |   "shang": "上商尚伤赏汤裳墒晌垧觞殇熵绱",
376 |   "xing": "行省星腥猩惺兴刑型形邢饧醒幸杏性姓陉荇荥擤悻硎",
377 |   "shou": "收手受首售授守寿瘦兽狩绶艏扌",
378 |   "shuo": "说数硕烁朔铄妁槊蒴搠",
379 |   "su": "速素苏诉缩塑肃俗宿粟溯酥夙愫簌稣僳谡涑蔌嗉觫",
380 |   "shua": "刷耍唰",
381 |   "shuan": "栓拴涮闩",
382 |   "shun": "顺瞬舜吮",
383 |   "song": "送松宋讼颂耸诵嵩淞怂悚崧凇忪竦菘",
384 |   "sou": "艘搜擞嗽嗖叟馊薮飕嗾溲锼螋瞍",
385 |   "sun": "损孙笋荪榫隼狲飧",
386 |   "teng": "腾疼藤滕誊",
387 |   "tie": "铁贴帖餮萜",
388 |   "tu": "土突图途徒涂吐屠兔秃凸荼钍菟堍酴",
389 |   "wai": "外歪崴",
390 |   "wang": "王望往网忘亡旺汪枉妄惘罔辋魍",
391 |   "weng": "翁嗡瓮蓊蕹",
392 |   "zhua": "抓挝爪",
393 |   "yang": "样养央阳洋扬杨羊详氧仰秧痒漾疡泱殃恙鸯徉佯怏炀烊鞅蛘",
394 |   "xiong": "雄兄熊胸凶匈汹芎",
395 |   "yo": "哟唷",
396 |   "yong": "用永拥勇涌泳庸俑踊佣咏雍甬镛臃邕蛹恿慵壅痈鳙墉饔喁",
397 |   "za": "杂扎咱砸咋匝咂拶",
398 |   "zai": "在再灾载栽仔宰哉崽甾",
399 |   "zao": "造早遭枣噪灶燥糟凿躁藻皂澡蚤唣",
400 |   "zei": "贼",
401 |   "zen": "怎谮",
402 |   "zeng": "增曾综赠憎锃甑罾缯",
403 |   "zhei": "这",
404 |   "zou": "走邹奏揍诹驺陬楱鄹鲰",
405 |   "zhuai": "转拽",
406 |   "zun": "尊遵鳟樽撙",
407 |   "dia": "嗲",
408 |   "nou": "耨"
409 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui';
 4 | import 'element-ui/lib/theme-chalk/index.css';
 5 | import keyboard from './components/keyboard'
 6 | // import keyboard from "vue-virtual-keyboard-cn"
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | 
11 | 
12 | 
13 | // Vue.config.errorHandler = function (err, vm, info) {
14 | //   console.log(`Error: ${err.toString()}\nInfo: ${info}`, vm);
15 | // }
16 | Vue.use(keyboard);
17 | Vue.use(ElementUI);
18 | 
19 | new Vue({
20 |   render: h => h(App),
21 | }).$mount('#app')
22 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // const { defineConfig } = require('@vue/cli-service')
 2 | module.exports = {
 3 |   // configureWebpack: config => {
 4 |   //   config.module.rules.push({
 5 |   //     test: /\.worker.js$/,
 6 |   //     use: {
 7 |   //       loader: 'worker-loader',
 8 |   //       // 允许将内联的 web worker 作为 BLOB
 9 |   //     },
10 |   //   })
11 |   // },
12 |   parallel: false, // 打包报错的配置
13 |   publicPath: process.env.NODE_ENV === 'production'
14 |     ? './'
15 |     : '/'
16 | }
17 | 


--------------------------------------------------------------------------------