键盘

src/pages/ifconfig/IfconfigSetup.vue

@@ -70,7 +70,7 @@ export default {
         preventClickEvent: false
       },
       checkShow: false,
-      fromShow: false,
+      fromShow: true,
       disabled1: false,
       disabled2: false
     }

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>

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()
+      }
     }
   }
 }

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()
+      }
     }
   }
 }

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()
+      }
     }
   }
 }

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>

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