中文键盘

package-lock.json

@@ -14,6 +14,7 @@
         "moment": "^2.29.4",
         "pinia": "^2.0.32",
         "simple-keyboard": "^3.6.40",
+        "simple-keyboard-layouts": "^3.3.12",
         "vant": "^4.6.3",
         "vue": "^3.2.45",
         "vue-router": "^4.0.13"
@@ -719,6 +720,11 @@
       "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz",
       "integrity": "sha512-4QmY9lpGhEIPeSUbUVnyLaYZBm9akR8z40c3ReSIij0h/oGaUxmVfcQIfG/Yvydym9m+PIWXdcquRv9fR+g/1w=="
     },
+    "node_modules/simple-keyboard-layouts": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.12.tgz",
+      "integrity": "sha512-lzYy7C0dFiFJxL+AzDTD0AjybI5MEImaGtHc7mz52QL85dpuOTIN4DofGZHQFAdstMw62zrVIxfTwuPD2LMelA=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1374,6 +1380,11 @@
       "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz",
       "integrity": "sha512-4QmY9lpGhEIPeSUbUVnyLaYZBm9akR8z40c3ReSIij0h/oGaUxmVfcQIfG/Yvydym9m+PIWXdcquRv9fR+g/1w=="
     },
+    "simple-keyboard-layouts": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.12.tgz",
+      "integrity": "sha512-lzYy7C0dFiFJxL+AzDTD0AjybI5MEImaGtHc7mz52QL85dpuOTIN4DofGZHQFAdstMw62zrVIxfTwuPD2LMelA=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "moment": "^2.29.4",
     "pinia": "^2.0.32",
     "simple-keyboard": "^3.6.40",
+    "simple-keyboard-layouts": "^3.3.12",
     "vant": "^4.6.3",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13"

src/components/SimpleKeyboard.vue

@@ -1,10 +1,11 @@
 <template>
-  <div :class="keyboardClass" id="keyboard"></div>
+  <div :class="keyboardClass"></div>
 </template>
 
 <script>
 import Keyboard from 'simple-keyboard'
 import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
 
 export default {
   name: 'SimpleKeyboard',
@@ -14,34 +15,108 @@ export default {
       type: String,
     },
     input: {
-      type: String,
-    },
-    hideKeyBoard: {
-      type: Function,
-      default: () => {},
+      default: '',
     },
+    maxLength: { default: '' },
   },
   data: () => ({
     keyboard: null,
+    displayDefault: {
+      '{bksp}': 'backspace',
+      '{lock}': 'caps',
+      '{enter}': '> enter',
+      '{tab}': 'tab',
+      '{shift}': 'shift',
+      '{change}': '英文',
+      '{space}': ' ',
+      '{clear}': '清空',
+      '{close}': '关闭',
+    },
   }),
   mounted() {
     this.keyboard = new Keyboard(this.keyboardClass, {
       onChange: this.onChange,
       onKeyPress: this.onKeyPress,
+      layoutCandidates: layout.layoutCandidates,
+      layout: {
+        // 默认布局
+        default: [
+          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+          '{tab} q w e r t y u i o p [ ] \\',
+          "{lock} a s d f g h j k l ; '",
+          '{shift} z x c v b n m , . /',
+          '{clear}',
+        ],
+        // shift布局
+        shift: [
+          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+          '{tab} Q W E R T Y U I O P { } |',
+          '{lock} A S D F G H J K L : "',
+          '{shift} Z X C V B N M &lt; &gt; ?',
+          '{clear}',
+        ],
+      },
+      // 按钮展示文字
+      display: this.displayDefault,
+      // 按钮样式
+      buttonTheme: [
+        {
+          class: 'hg-red close',
+          buttons: '{close}',
+        },
+        {
+          class: 'change',
+          buttons: '{change}',
+        },
+      ],
+      // 输入限制长度
+      maxLength: this.maxLength,
     })
   },
   methods: {
     onChange(input) {
+      this.keyboard.setInput(input)
       this.$emit('onChange', input)
     },
-    onKeyPress(button) {
+    // 点击键盘
+    onKeyPress(button, $event) {
+      const self = this
+      // 点击关闭
+      if (button === '{close}') {
+        let keyboard = $event.path[3]
+        keyboard.style.visibility = 'hidden'
+        return false
+      } else if (button === '{change}') {
+        // 切换中英文输入法
+        if (this.keyboard.options.layoutCandidates !== null) {
+          self.$set(this.displayDefault, '{change}', '中文')
+          // 切换至英文
+          this.keyboard.setOptions({
+            layoutCandidates: null,
+            display: this.displayDefault,
+          })
+        } else {
+          // 切换至中文
+          self.$set(this.displayDefault, '{change}', '英文')
+          this.keyboard.setOptions({
+            layoutCandidates: layout.layoutCandidates,
+            display: this.displayDefault,
+          })
+        }
+      } else if (button === '{clear}') {
+        this.keyboard.clearInput()
+      } else {
+        let value =
+          $event.target.offsetParent.parentElement.children[0].children[0].value
+        // 输入框有默认值时，覆写
+        if (value) {
+          this.keyboard.setInput(value)
+        }
         this.$emit('onKeyPress', button)
-
-      /**
-       * If you want to handle the shift and caps lock buttons
-       */
+      }
       if (button === '{shift}' || button === '{lock}') this.handleShift()
     },
+    // 切换shift/默认布局
     handleShift() {
       let currentLayout = this.keyboard.options.layoutName
       let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
@@ -59,9 +134,21 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-.simple-keyboard {
-  z-index: 999 !important;
+<style lang="scss">
+@deep: ~'>>>';
+.hg-theme-default {
+  width: 100%;
+  .hg-buton {
+    &.hg-red {
+      background: #db3e5d;
+      color: white;
+      &.close {
+        max-width: 200px;
+      }
+    }
+    &.change {
+      max-width: 200px;
+    }
+  }
 }
 </style>

yarn.lock

@@ -523,6 +523,11 @@ sass@^1.58.3:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+simple-keyboard-layouts@^3.3.12:
+  version "3.3.12"
+  resolved "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.12.tgz"
+  integrity sha512-lzYy7C0dFiFJxL+AzDTD0AjybI5MEImaGtHc7mz52QL85dpuOTIN4DofGZHQFAdstMw62zrVIxfTwuPD2LMelA==
+
 simple-keyboard@^3.6.40:
   version "3.6.40"
   resolved "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz"