键盘

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