键盘

src/components/SimpleKeyboard.vue

@@ -31,7 +31,41 @@ export default {
       '{space}': ' ',
       '{clear}': 'Clear',
       '{close}': 'Close'
-    }
+    },
+    buttonTheme: [
+      {
+        class: 'hg-gray',
+        buttons: '{bksp}'
+      },
+      {
+        class: 'hg-gray',
+        buttons: '{tab}'
+      },
+      {
+        class: 'hg-gray',
+        buttons: '{enter}'
+      },
+      {
+        class: 'hg-gray',
+        buttons: '{clear}'
+      },
+      {
+        class: 'hg-blue',
+        buttons: '{close}'
+      },
+      {
+        class: 'hg-blue',
+        buttons: '{change}'
+      },
+      {
+        class: 'hg-gray',
+        buttons: '{lock}'
+      },
+      {
+        class: 'hg-gray',
+        buttons: '{shift}'
+      }
+    ]
   }),
   mounted () {
     this.keyboard = new Keyboard(this.keyboardClass, {
@@ -58,40 +92,7 @@ export default {
       // 按钮展示文字
       display: this.displayDefault,
       // 按钮样式
-      buttonTheme: [
-        {
-          class: 'hg-gray',
-          buttons: '{bksp}'
-        },
-        {
-          class: 'hg-gray',
-          buttons: '{tab}'
-        },
-        {
-          class: 'hg-gray',
-          buttons: '{lock}'
-        },
-        {
-          class: 'hg-gray',
-          buttons: '{enter}'
-        },
-        {
-          class: 'hg-gray',
-          buttons: '{shift}'
-        },
-        {
-          class: 'hg-gray',
-          buttons: '{clear}'
-        },
-        {
-          class: 'hg-blue',
-          buttons: '{close}'
-        },
-        {
-          class: 'hg-blue',
-          buttons: '{change}'
-        }
-      ],
+      buttonTheme: this.buttonTheme,
       // 输入限制长度
       maxLength: this.maxLength
     })
@@ -102,9 +103,8 @@ export default {
     },
     onKeyPress (button, $event) {
       // 点击关闭
-      if (button === '{close}') {
-        // debugger
-        // this.$parent.closekeyboard()
+      if (button === '{close}' || button === '{enter}') {
+        // this.keyboard.destroy()
         let arr = document.querySelectorAll('.hg-theme-default')
         arr.forEach((ele) => {
           ele.style.visibility = 'hidden'
@@ -130,17 +130,30 @@ export default {
       } else if (button === '{clear}') {
         this.keyboard.clearInput()
       } else if (button === '{shift}' || button === '{lock}') {
-        this.handleShift()
+        this.handleShift(button)
       }
       this.$emit('onKeyPress', button)
     },
     // 切换shift/默认布局
-    handleShift () {
+    handleShift (button) {
       let currentLayout = this.keyboard.options.layoutName
       let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
       this.keyboard.setOptions({
         layoutName: shiftToggle
       })
+      let buttonTheme = []
+      if (currentLayout === 'default') {
+        let addClass = button === '{shift}' ? {class: 'hg-blue2', buttons: '{shift}'} : {class: 'hg-blue2', buttons: '{lock}'}
+        buttonTheme = [...this.buttonTheme, addClass]
+        this.keyboard.setOptions({
+          buttonTheme: buttonTheme
+        })
+      } else if (currentLayout === 'shift') {
+        buttonTheme = [...this.buttonTheme]
+        this.keyboard.setOptions({
+          buttonTheme: buttonTheme
+        })
+      }
     }
   },
   watch: {
@@ -160,7 +173,7 @@ export default {
     right: 0;
     bottom: 0;
     z-index: 1000;
-    width 100%
+    width 100%;
     padding: 1em;
     background-color: #eee;
     box-shadow: 0 -3px 10px rgba(0,0,0,.3);
@@ -195,6 +208,17 @@ export default {
         -ms-user-select: none;
         user-select: none;
         cursor: pointer;
+        padding: 0;
+        box-sizing: content-box;
+        &:hover
+          color: #333;
+          background-color: #d6d6d6;
+          border-color: #adadad;
+        &:active
+          transform: scale(.98);
+          color: #333;
+          background-color: #d4d4d4;
+          border-color: #8c8c8c;
       & .hg-button-bksp
           flex: 65 1 0%;
           background-image: url("../images/backspace.svg");
@@ -214,6 +238,10 @@ export default {
           color: #fff;
           background-color: #337ab7;
           border-color: #2e6da4;
+      & .hg-blue2
+          color: #fff;
+          background-color: #5bc0de;
+          border-color: #46b8da;
       & .hg-button-tab
           flex: 60 1 0%;
       & .hg-button-lock, .hg-button-enter
@@ -225,4 +253,7 @@ export default {
       & .font-s
         font-size .75em
         opacity 0.6
+/deep/ .hg-candidate-box
+  height 40px
+  color #000
 </style>