软废组袋打印滚动

src/pages/xinrui/storage/settings/SoftWasteBagPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <nav-bar title="软废袋标签打印"></nav-bar>
-    <section class="content mgt186">
+    <section class="content mgt186" ref="content">
       <div class="filter-wraper">
         <search-box
         label="袋码"
@@ -36,7 +36,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">还回人员</div>
           <div class="fxcol mgl20">
-            <input type="text" class="filter-input filter-scan-input" v-model="val5">
+            <input type="text" class="filter-input filter-scan-input" v-model="val5" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
         <div class="bottom-filter-tip">
@@ -54,7 +54,7 @@
         <div class="bottom-filter-tip">
           <div class="filter-label txtjustify">袋数</div>
           <div class="fxcol mgl20">
-            <input type="number" class="filter-input filter-scan-input" v-model="val6">
+            <input type="number" class="filter-input filter-scan-input" v-model="val6" @focus="windowScrollTo($event)" @blur="windowsScrollTopZero">
           </div>
         </div>
       </div>
@@ -121,6 +121,25 @@ export default {
     this._queryWasteType()
   },
   methods: {
+    windowScrollTo (e) {
+      // 可见窗口高
+      let innerHeight = 6.12 * parseFloat(document.documentElement.style.fontSize)
+      // 元素底部到可视窗口的距离
+      let elHeight = e.target.getBoundingClientRect().bottom
+      if (elHeight > innerHeight) {
+        let mgb = elHeight - innerHeight
+        this.$refs.content.style.marginBottom = mgb + 'px'
+        setTimeout(() => {
+          window.scrollTo(0, mgb)
+        }, 100)
+      }
+    },
+    windowsScrollTopZero () {
+      this.$refs.content.style.marginBottom = '0px'
+      setTimeout(() => {
+        window.scrollTo(0, 0)
+      }, 100)
+    },
     handleChange (e, type) {
       if (type) {
         this._queryBagInfo(e)
@@ -263,3 +282,9 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.content
+  height calc(100% - 1.86rem)
+  overflow hidden
+</style>