键盘

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>