贷款-自定义指令，键盘收回页面被顶上去

htmldev/loan/src/main.js

@@ -8,7 +8,17 @@ Vue.config.productionTip = false
 
 Vue.filter('toThousands', toThousands)
 Vue.prototype.$refreshTitle = refreshTitle
-
+Vue.directive('myBlur', {
+  inserted: function (element) {
+    element.onblur = function () {
+      const timer = setTimeout(function () {
+        clearTimeout(timer)
+        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
+        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
+      }, 100)
+    }
+  }
+})
 new Vue({
   router,
   render: h => h(App)

htmldev/loan/src/views/loan/apply/index.vue

@@ -9,7 +9,7 @@
         </label>
         <div class="value-wrap">
           <div class="value-name">
-            <input type="text" placeholder="请输入姓名" v-model.trim="postData.orderUserName">
+            <input type="text" placeholder="请输入姓名" v-myBlur v-model.trim="postData.orderUserName">
           </div>
           <div class="value-gender">
             <p v-for="str in ['男', '女']" :key="str" @click="postData.orderUserSex = str">
@@ -25,7 +25,8 @@
           <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="number" placeholder="请输入手机号码" v-model.trim="postData.orderUserPhone" @input="funLimitLength">
+          <input type="number" placeholder="请输入手机号码" v-myBlur v-model.trim="postData.orderUserPhone"
+                 @input="funLimitLength">
         </div>
       </li>
       <li>
@@ -33,7 +34,7 @@
           <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="text" placeholder="图片验证码" v-model.trim="postData.capture">
+          <input type="text" placeholder="图片验证码" v-myBlur v-model.trim="postData.capture">
         </div>
         <img class="capture-img" :src="strCapture" alt="" @click="funUpdateCapture">
       </li>
@@ -42,7 +43,7 @@
           <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="number" placeholder="请输入验证码" v-model.trim="postData.code" @input="funLimitLength">
+          <input type="number" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
         </div>
         <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
       </li>
@@ -62,7 +63,7 @@
           <span v-for="(str, index) in '房产地址：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <textarea name="" rows="1" placeholder="请输入房产地址" v-model.trim="postData.orderAddress"
+          <textarea name="" rows="1" placeholder="请输入房产地址" v-model.trim="postData.orderAddress" v-myBlur
                     ref="myTextarea"></textarea>
         </div>
       </li>
@@ -71,7 +72,7 @@
           <span v-for="(str, index) in '需求金额：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap amount-wrap">
-          <input :class="{'opacity-0': postData.orderPrice * 1 > 0}" type="number" placeholder="请输入需求金额"
+          <input :class="{'opacity-0': postData.orderPrice * 1 > 0}" type="number" placeholder="请输入需求金额" v-myBlur
                  v-model.trim="amount">
           <p v-show="postData.orderPrice * 1 > 0">{{ postData.orderPrice * 1 | toThousands }}.00</p>
         </div>