Sfoglia il codice sorgente

改了下聚焦失焦底部消失状态

luolei 5 anni fa
parent
commit
7f1f144c2d

+ 4 - 1
src/App.vue

@@ -13,9 +13,12 @@
       (/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
         // 这里加了个类型判断,因为a等元素也会触发blur事件
         if(['input', 'textarea'].includes(e.target.localName)) {
+        // if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
+        //   document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
+        // }
           setTimeout(()=> {
             document.scrollingElement.scrollTo(0, document.scrollingElement.scrollTop);
-          }, 200);
+          }, 100);
         }
       }, true)
     },

+ 6 - 12
src/common/ComTextArea.vue

@@ -55,26 +55,20 @@ export default {
       }
     },
     changeVal(){
-          // $(".btscroll").css({'position':'fixed'})
       this.$emit('changeAreaVal',this.txt)
       const newData = Object.assign({},this.item,{value:this.txt,valueP:this.txt});
       this.$emit("updata",newData);
     },
     blur(){
-      if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
-        document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
-      }
-      $(".foot").css({'display':'block'})
-      // document.activeElement.scrollIntoViewIfNeeded(true);
-      // $(".foot").css({'display':'block'})
-      // setTimeout(()=>{
-      //   document.activeElement.scrollIntoViewIfNeeded(true);
-      // },300)
+      setTimeout(()=>{
+        $(".foot").css({'display':'block'})
+      },150)
     },
     focus(){
       if(isIos()){
-          // $(".btscroll").css({'position':'absolute'})
-        $(".foot").css({'display':'none'})
+        setTimeout(() => {
+          $(".foot").css({'display':'none'})
+        }, 150);
       }
     }
   },

+ 6 - 12
src/common/Input.vue

@@ -50,29 +50,23 @@
         if(this.item.controlType==7){//数字键盘
             this.val = e.target.value=e.target.value.replace(/^\.$/,'').slice(0,10)
         }
-        // document.activeElement.scrollIntoViewIfNeeded(true);
         this.borColor = false;
         const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
         this.$emit("updata",newData);
       },
       blur(){
-        // $(".btscroll").css({'position':'fixed'})
-        $(".foot").css({'display':'block'})
-        if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
-          document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
-        }
-        // document.activeElement.scrollIntoViewIfNeeded(true);
-        // setTimeout(()=>{
-        //   document.activeElement.scrollIntoViewIfNeeded(true);
-        // },300)
+        setTimeout(()=>{
+          $(".foot").css({'display':'block'})
+        },150)
         // this.borColor = false;
         // const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
         // this.$emit("updata",newData);
       },
       focus(e){
         if(isIos()){
-          // $(".btscroll").css({'position':'absolute'})
-          $(".foot").css({'display':'none'})
+          setTimeout(() => {
+            $(".foot").css({'display':'none'})
+          }, 150);
         }
       }
     },

+ 6 - 15
src/common/MultiLineInput.vue

@@ -74,7 +74,6 @@ export default {
   methods:{
     changeVal(e,num,type){
       let tmpTxt = '',arr=this.tmpArr
-      // document.activeElement.scrollIntoViewIfNeeded(true);
       if(type == 'number'){
           e.currentTarget.value = e.currentTarget.value.replace(/^\.$/,'').slice(0,10)
       }
@@ -90,27 +89,19 @@ export default {
       this.$emit('handleInp',this.txt);
     },
     blur(){
-      // 如果该项未选中,则不存值
-      // $(".btscroll").css({'position':'fixed'})
-      $(".foot").css({'display':'block'})
-      
-      if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
-        document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
-      }
-      // document.activeElement.scrollIntoViewIfNeeded(true);
-      // setTimeout(()=>{
-      //   document.activeElement.scrollIntoViewIfNeeded(true);
-      // },300)
+      setTimeout(()=>{
+        $(".foot").css({'display':'block'})
+      },150)
     },
     focus(){
       if(isIos()){
-          // $(".btscroll").css({'position':'absolute'})
-        $(".foot").css({'display':'none'})
+        setTimeout(() => {
+          $(".foot").css({'display':'none'})
+        }, 150);
       }
     },
     handleClick(e){
       // 点击输入框时不选中该项
-      // document.activeElement.scrollIntoViewIfNeeded(true);
       e.stopPropagation();
     }
   },

+ 6 - 12
src/common/OptionInp.vue

@@ -48,16 +48,9 @@ import $ from 'jquery';
         this.$emit('handleSelec');
       },
       handleBlur(){
-          // $(".btscroll").css({'position':'fixed'})
-        $(".foot").css({'display':'block'})
-        
-        if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
-          document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
-        }
-        // document.activeElement.scrollIntoViewIfNeeded(true);
-        // setTimeout(()=>{
-        //   document.activeElement.scrollIntoViewIfNeeded(true);
-        // },300)
+        setTimeout(()=>{
+          $(".foot").css({'display':'block'})
+        },150)
           // 如果该项未选中,则不存值
         // const select = this.item.select;
         // if(!select){return}
@@ -67,8 +60,9 @@ import $ from 'jquery';
       },
       focus(){
         if(isIos()){
-          // $(".btscroll").css({'position':'absolute'})
-          $(".foot").css({'display':'none'})
+          setTimeout(() => {
+            $(".foot").css({'display':'none'})
+          }, 150);
         }
       },
       preClick(e){

+ 2 - 1
src/components/Login.vue

@@ -373,9 +373,10 @@ export default {
   height: 100%;
   width: 100%;
   position: absolute;
-  background: #colors[btn];
   padding: 0rem 0.6rem;
   box-sizing: border-box;
+  overflow: auto;
+  background: #colors[btn];
   .top {
     .img {
       width: 1.6rem;

+ 1 - 0
src/utils/tools.js

@@ -327,6 +327,7 @@ function setScroll(scroll,flg,wrapper){
       scrollY: flg,
       click: true,
       tap: true,
+      autoBlur:isIos()?true:false,
       probeType:3,
       bounceTime:800,
       momentumLimitTime:300,//只有在屏幕上快速滑动的时间小于 momentumLimitTime,才能开启 momentum 动画。