键盘

2023-11-22 17:11:29 +08:00
parent cfadbbd374
commit 02c8bdbba7
7 changed files with 190 additions and 65 deletions
--- a/src/components/SimpleKeyboard.vue
+++ b/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>
--- a/src/components/keyboard-input.vue
+++ b/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);
--- a/src/pages/modules/login/login.vue
+++ b/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);
--- a/src/pages/modules/systemmanage/role.vue
+++ b/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
    }
  }
 }
--- a/src/pages/modules/systemmanage/system.vue
+++ b/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
    }
  }
 }
--- a/src/pages/modules/systemmanage/user.vue
+++ b/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
    }
  }
 }
--- a/src/style/common.styl
+++ b/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;