键盘

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: [
+      buttonTheme: this.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}'
-        }
-      ],
       // 输入限制长度
       maxLength: this.maxLength
     })
@@ -102,9 +103,8 @@ export default {
     },
     onKeyPress (button, $event) {
       // 点击关闭
-      if (button === '{close}') {
+      if (button === '{close}' || button === '{enter}') {
-        // debugger
+        // this.keyboard.destroy()
-        // this.$parent.closekeyboard()
         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>

src/components/keyboard-input.vue

@@ -76,6 +76,7 @@ export default {
       this.$emit('input')
     },
     focusInput (e) {
+      this.$emit('inputFocus')
       this.inputEle = e.srcElement
       // 关闭所有keyboard
       let arr = document.querySelectorAll('.hg-theme-default')
@@ -113,7 +114,7 @@ export default {
       if (button === '{clear}') {
         this.inputValue = ''
       }
-      console.log('onKeyPress', button)
+      // console.log('onKeyPress', button)
     }
   }
 }
@@ -122,12 +123,13 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .input-keyboard
-    width 100%
+  font-size 16px
+  width 100%
 .login-input
   width 100%
   _font(30px, 78px, #fff,,)
   background: rgba(45,88,184,0.1);
-  border: 1px solid #4980BD;
+  border: 2px solid #4980BD;
   padding 0 22px
   &:focus
     background: rgba(45,88,184,0.25);

src/pages/modules/login/login.vue

@@ -20,6 +20,7 @@
               keyboardClass="username"
               :value="username"
               @inputChange="inputChange"
+              @inputFocus="inputFocus"
             ></keyboard-input>
             </div>
           </div>
@@ -39,7 +40,7 @@
           <div class="login-item">
             <div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
             <div class="login_value login_value_1">
-              <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
+              <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
             </div>
           </div>
           <div class="login-item">
@@ -151,6 +152,11 @@ export default {
       }
     },
     show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
       this.input = e.target
       this.layout = e.target.dataset.layout
       if (!this.visible) {
@@ -167,7 +173,7 @@ export default {
       let inputs = document.querySelectorAll('input')
       let found = false;
       [].forEach.call(inputs, (item, i) => {
-        if (!found && item === this.input && i < inputs.length - 1) {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
           found = true
           this.$nextTick(() => {
             inputs[i + 1].focus()
@@ -181,6 +187,9 @@ export default {
     },
     inputChange (val) {
       this.username = val
+    },
+    inputFocus () {
+      this.visible = false
     }
   }
 }
@@ -249,7 +258,7 @@ export default {
   width 100%
   _font(30px, 78px, #fff,,)
   background: rgba(45,88,184,0.1);
-  border: 1px solid #4980BD;
+  border: 2px solid #4980BD;
   padding 0 22px
   &:focus
     background: rgba(45,88,184,0.25);

src/pages/modules/systemmanage/role.vue

@@ -49,7 +49,14 @@
         <div class="form_item">
           <div class="form_item__label"><i>*</i>角色名称</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
+            <!-- <input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal"> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="rolename"
+              :value="rolename"
+              @inputChange="inputChange1"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
       </div>
@@ -57,7 +64,14 @@
         <div class="form_item allwidth">
           <div class="form_item__label">备注</div>
           <div class="form_item__content">
-            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
+            <!-- <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="remark"
+              :value="remark"
+              @inputChange="inputChange2"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
       </div>
@@ -99,10 +113,12 @@
 
 <script>
 import jxDialog from '@components/dialog.vue'
+import KeyboardInput from '@components/keyboard-input'
 import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
 export default {
   components: {
-    jxDialog
+    jxDialog,
+    KeyboardInput
   },
   data () {
     return {
@@ -353,6 +369,15 @@ export default {
         this.input.blur()
         this.hide()
       }
+    },
+    inputChange1 (val) {
+      this.rolename = val
+    },
+    inputChange2 (val) {
+      this.remark = val
+    },
+    inputFocus () {
+      this.visible = false
     }
   }
 }

src/pages/modules/systemmanage/system.vue

@@ -49,13 +49,20 @@
         <div class="form_item">
           <div class="form_item__label"><i>*</i>编码</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal">
+            <input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal" data-next="1">
           </div>
         </div>
         <div class="form_item">
           <div class="form_item__label"><i>*</i>名字</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
+            <!-- <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal"> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="name"
+              :value="name"
+              @inputChange="inputChange1"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
       </div>
@@ -63,7 +70,7 @@
         <div class="form_item">
           <div class="form_item__label"><i>*</i>数值</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric">
+            <input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric" data-next="1">
           </div>
         </div>
       </div>
@@ -71,7 +78,14 @@
         <div class="form_item allwidth">
           <div class="form_item__label">备注</div>
           <div class="form_item__content">
-            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
+            <!-- <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="remark"
+              :value="remark"
+              @inputChange="inputChange2"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
       </div>
@@ -85,10 +99,12 @@
 
 <script>
 import jxDialog from '@components/dialog.vue'
+import KeyboardInput from '@components/keyboard-input'
 import { paramQuery, paramAdd, paramEdit, paramDelete } from '@config/getData2.js'
 export default {
   components: {
-    jxDialog
+    jxDialog,
+    KeyboardInput
   },
   data () {
     return {
@@ -294,7 +310,7 @@ export default {
       let inputs = document.querySelectorAll('input')
       let found = false;
       [].forEach.call(inputs, (item, i) => {
-        if (!found && item === this.input && i < inputs.length - 1) {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
           found = true
           this.$nextTick(() => {
             inputs[i + 1].focus()
@@ -305,6 +321,15 @@ export default {
         this.input.blur()
         this.hide()
       }
+    },
+    inputChange1 (val) {
+      this.name = val
+    },
+    inputChange2 (val) {
+      this.remark = val
+    },
+    inputFocus () {
+      this.visible = false
     }
   }
 }

src/pages/modules/systemmanage/user.vue

@@ -52,13 +52,20 @@
         <div class="form_item">
           <div class="form_item__label"><i>*</i>用户名</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="username" @focus="show" data-layout="normal">
+            <!-- <input type="text" class="form_item__input" v-model="username" @focus="show" data-layout="normal"> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="username"
+              :value="username"
+              @inputChange="inputChange1"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
         <div class="form_item">
           <div class="form_item__label">电话</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="phone" @focus="show" data-layout="numeric">
+            <input type="text" class="form_item__input" v-model="phone" @focus="show" data-layout="numeric" data-next="1">
           </div>
         </div>
       </div>
@@ -66,7 +73,14 @@
         <div class="form_item">
           <div class="form_item__label">姓名</div>
           <div class="form_item__content">
-            <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
+            <!-- <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal"> -->
+            <keyboard-input
+              inputClass="form_item__input"
+              keyboardClass="name"
+              :value="name"
+              @inputChange="inputChange2"
+              @inputFocus="inputFocus"
+            ></keyboard-input>
           </div>
         </div>
         <div class="form_item">
@@ -115,11 +129,13 @@
 
 <script>
 import jxDialog from '@components/dialog.vue'
+import KeyboardInput from '@components/keyboard-input'
 import {usersQuery, sysRoleQuery, usersAdd, usersEdit, usersDelete} from '@config/getData2.js'
 import {encrypt} from '../../../main.js'
 export default {
   components: {
-    jxDialog
+    jxDialog,
+    KeyboardInput
   },
   data () {
     return {
@@ -359,6 +375,11 @@ export default {
       }
     },
     show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
       this.input = e.target
       this.layout = e.target.dataset.layout
       if (!this.visible) {
@@ -375,7 +396,7 @@ export default {
       let inputs = document.querySelectorAll('input')
       let found = false;
       [].forEach.call(inputs, (item, i) => {
-        if (!found && item === this.input && i < inputs.length - 1) {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
           found = true
           this.$nextTick(() => {
             inputs[i + 1].focus()
@@ -386,6 +407,15 @@ export default {
         this.input.blur()
         this.hide()
       }
+    },
+    inputChange1 (val) {
+      this.username = val
+    },
+    inputChange2 (val) {
+      this.name = val
+    },
+    inputFocus () {
+      this.visible = false
     }
   }
 }

src/style/common.styl

@@ -196,6 +196,9 @@
   z-index: 201;
 .dialog_wrapper
   position: fixed;
+  display: flex;
+  justify-content: center
+  align-items: center
   top: 0;
   right: 0;
   bottom: 0;
@@ -203,14 +206,10 @@
   overflow: auto;
   z-index: 202;
 .dialog
-  position: relative;
-  margin: 0 auto;
   background center / 100% 100% url(../images/new/modal_bg.png) no-repeat
   width: 885px;
   min-height: 354px;
   max-height: 1000px;
-  top: 50%
-  transform: translateY(-50%)
 .dialog_header
   height 86px
   padding 25px 29px
@@ -376,6 +375,10 @@
   line-height 80px
   height 80px
   border 2px solid #4980BD
+.el-input--suffix.el-input__inner
+  padding-right: 60px;
+.el-input__suffix
+  right 15px
 .dialog_footer
   height 188px
   padding: 50px 20px;