键盘

2023-06-19 18:23:45 +08:00
parent c9bccf8a40
commit 885a5c9797
7 changed files with 257 additions and 24 deletions
--- a/src/pages/ifconfig/IfconfigSetup.vue
+++ b/src/pages/ifconfig/IfconfigSetup.vue
@@ -70,7 +70,7 @@ export default {
        preventClickEvent: false
      },
      checkShow: false,
-      fromShow: false,
+      fromShow: true,
      disabled1: false,
      disabled2: false
    }
--- a/src/pages/modules/login/login.vue
+++ b/src/pages/modules/login/login.vue
@@ -14,11 +14,11 @@
          <div class="login-items-wraper">
            <div class="login-item">
              <div class="login-label" @click="toFocus(1)">用户名</div>
-              <input type="text" class="login-input" ref="input1" v-model="username">
+              <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
            </div>
            <div class="login-item">
              <div class="login-label" @click="toFocus(2)">密码</div>
-              <input type="password" class="login-input" ref="input2" v-model="password">
+              <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
            </div>
          </div>
          <!-- <div class="login-setup-wraper">
@@ -37,11 +37,11 @@
          <div class="login-items-wraper">
            <div class="login-item">
              <div class="login-label" @click="toFocus(3)">域名地址</div>
-              <input type="text" class="login-input" ref="input3" v-model="baseUrl">
+              <input type="text" class="login-input" ref="input3" v-model="baseUrl" @focus="show" data-layout="normal">
            </div>
            <div class="login-item">
              <div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
-              <input type="number" class="login-input" ref="input4" v-model="setTime">
+              <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
            </div>
          </div>
          <div class="login-setup-wraper login-setup-wraper__r">
@@ -57,6 +57,7 @@
      <div class="footer_p1">Copyright © www.noblelift.cn, All Rights Reserved.</div>
      <div class="footer_p2">国内唯一（全球仅四家）能够同时提供物料搬运设备、智能立体仓库、智能输送分拣系统、AGV及其系统、供应链综合系统软件以及智能制造全系统整体解决方案的公司。</div>
    </div>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
  </div>
 </template>

@@ -71,7 +72,14 @@ export default {
      password: '',
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
-      disabled: false
+      disabled: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
    }
  },
  mounted () {
@@ -100,9 +108,11 @@ export default {
    },
    toSetup () {
      this.tab = 1
+      this.hide()
    },
    toLogin () {
      this.tab = 0
+      this.hide()
    },
    saveSetup () {
      let obj = {
@@ -132,10 +142,40 @@ export default {
        let obj = {}
        obj = Object.assign({}, res)
        this.$store.dispatch('userInfo', JSON.stringify(obj))
+        this.hide()
        this.$router.push('/index/home')
      } catch (err) {
        this.disabled = false
      }
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
    }
  }
 }
@@ -230,4 +270,17 @@ export default {
  _font(14px, 24px, #fff,,center)
 .footer_p2
  _font(15px, 24px, #fff,,center)
+#keyboard
+    position fixed
+    left 0
+    right 0
+    bottom 0
+    z-index 1000
+    width 100%
+    // max-width 1366px
+    margin 0 auto
+    padding 1em
+    background-color #EEE
+    box-shadow 0px -3px 10px rgba(black, 0.3)
+    border-radius 10px
 </style>
--- a/src/pages/modules/systemmanage/role.vue
+++ b/src/pages/modules/systemmanage/role.vue
@@ -68,13 +68,14 @@
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
+    @toCancle="toCancle"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <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">
+            <input type="text" class="form_item__input" v-model="rolename" @focus="show" data-layout="normal">
          </div>
        </div>
      </div>
@@ -82,7 +83,7 @@
        <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"></textarea>
+            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
          </div>
        </div>
      </div>
@@ -90,6 +91,7 @@
    <div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
+  <vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
 </div>
 </template>

@@ -117,7 +119,14 @@ export default {
      pkObj: {},
      pkId: '',
      unclick: false,
-      disabled: false
+      disabled: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      keyoptions: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
    }
  },
  watch: {
@@ -196,6 +205,10 @@ export default {
          this._sysRoleDelete()
          break
      }
+      this.hide()
+    },
+    toCancle () {
+      this.hide()
    },
    async _sysRoleAdd () {
      this.$refs.child.disabled = true
@@ -304,6 +317,35 @@ export default {
      } else {
        this.checkedKeys = []
      }
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
    }
  }
 }
--- a/src/pages/modules/systemmanage/system.vue
+++ b/src/pages/modules/systemmanage/system.vue
@@ -37,19 +37,20 @@
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
+    @toCancle="toCancle"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <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">
+            <input type="text" class="form_item__input" v-model="code" @focus="show" data-layout="normal">
          </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">
+            <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
          </div>
        </div>
      </div>
@@ -57,7 +58,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">
+            <input type="text" class="form_item__input" v-model="value" @focus="show" data-layout="numeric">
          </div>
        </div>
      </div>
@@ -65,7 +66,7 @@
        <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"></textarea>
+            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea" @focus="show" data-layout="normal"></textarea>
          </div>
        </div>
      </div>
@@ -73,6 +74,7 @@
    <div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
    </jxDialog>
  </div>
+  <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
 </div>
 </template>

@@ -93,7 +95,14 @@ export default {
      name: '',
      value: '',
      remark: '',
-      unclick: false
+      unclick: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
    }
  },
  watch: {
@@ -168,6 +177,10 @@ export default {
          this.pkObj = e
          break
      }
+      this.hide()
+    },
+    toCancle () {
+      this.hide()
    },
    toSureDialog (type) {
      switch (type) {
@@ -256,6 +269,35 @@ export default {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
    }
  }
 }
--- a/src/pages/modules/systemmanage/user.vue
+++ b/src/pages/modules/systemmanage/user.vue
@@ -40,19 +40,20 @@
    :type="type"
    :unclick="unclick"
    @toSure="toSureDialog"
+    @toCancle="toCancle"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <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">
+            <input type="text" class="form_item__input" v-model="username" @focus="show" data-layout="normal">
          </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">
+            <input type="text" class="form_item__input" v-model="phone" @focus="show" data-layout="numeric">
          </div>
        </div>
      </div>
@@ -60,7 +61,7 @@
        <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">
+            <input type="text" class="form_item__input" v-model="name" @focus="show" data-layout="normal">
          </div>
        </div>
        <div class="form_item">
@@ -80,7 +81,7 @@
        <div v-if="type === '1'" class="form_item">
          <div class="form_item__label"><i>*</i>密码</div>
          <div class="form_item__content">
-            <input type="password" class="form_item__input" v-model="password">
+            <input type="password" class="form_item__input" v-model="password" @focus="show" data-layout="normal">
          </div>
        </div>
        <div class="form_item">
@@ -102,6 +103,7 @@
    <div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
+  <vue-touch-keyboard id="keyboard" :options="keyoptions" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
 </div>
 </template>

@@ -129,7 +131,14 @@ export default {
      value: '',
      disabled1: false,
      pkObj: {},
-      unclick: false
+      unclick: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      keyoptions: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
    }
  },
  watch: {
@@ -236,6 +245,10 @@ export default {
          this._usersDelete()
          break
      }
+      this.hide()
+    },
+    toCancle () {
+      this.hide()
    },
    toRadio (e) {
      this.sex = e.value
@@ -338,6 +351,35 @@ export default {
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
    }
  }
 }
--- a/src/pages/shells/index/index.vue
+++ b/src/pages/shells/index/index.vue
@@ -59,13 +59,14 @@
    title="修改密码"
    :unclick="unclick"
    @toSure="toSureDialog"
+    @toCancle="toCancle"
    >
      <div class="form_wraper">
        <div class="form">
          <div class="form_item">
            <div class="form_item__label"><i>*</i>旧的密码</div>
            <div class="form_item__content">
-              <input type="password" class="form_item__input" v-model="oldpassword">
+              <input type="password" class="form_item__input" v-model="oldpassword" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
@@ -73,7 +74,7 @@
          <div class="form_item">
            <div class="form_item__label"><i>*</i>新的密码</div>
            <div class="form_item__content">
-              <input type="password" class="form_item__input" v-model="newpassword1">
+              <input type="password" class="form_item__input" v-model="newpassword1" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
@@ -81,12 +82,13 @@
          <div class="form_item">
            <div class="form_item__label"><i>*</i>新的密码</div>
            <div class="form_item__content">
-              <input type="password" class="form_item__input" v-model="newpassword2">
+              <input type="password" class="form_item__input" v-model="newpassword2" @focus="show" data-layout="normal">
            </div>
          </div>
        </div>
      </div>
    </jxDialog>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
  </div>
 </template>

@@ -186,7 +188,14 @@ export default {
      oldpassword: '',
      newpassword1: '',
      newpassword2: '',
-      unclick: false
+      unclick: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
    }
  },
  computed: {
@@ -267,6 +276,10 @@ export default {
    },
    toSureDialog () {
      this._updatePass()
+      this.hide()
+    },
+    toCancle () {
+      this.hide()
    },
    async _updatePass () {
      this.$refs.child.disabled = true
@@ -317,6 +330,35 @@ export default {
      this.$store.dispatch('setSignOut')
      this._authLogout()
      this.$router.push('/login')
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
    }
  }
 }
@@ -474,5 +516,4 @@ export default {
  padding 0 10px
 }
 }
-
 </style>
--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -300,6 +300,19 @@
  padding: 10px 20px 20px;
  text-align: center;
  box-sizing: border-box;
+#keyboard
+  position fixed
+  left 0
+  right 0
+  bottom 0
+  z-index 1000
+  width 100%
+  // max-width 1366px
+  margin 0 auto
+  padding 1em
+  background-color #EEE
+  box-shadow 0px -3px 10px rgba(black, 0.3)
+  border-radius 10px

 // 用户管理
 .right_side