解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题


最近用vue写表单时,弹出的软键盘将固定在页面底部的按钮顶上来了,导致布局有一定的混乱。

原因:某些手机下键盘弹起会引起窗口高度(html标签的高度)变小,而fixed定位是相对于html根元素的,所以会被顶上来。如下图:

(网络配图)

解决方式:

export default {

    data() {

        return {

            clientHeight:document.documentElement.clientHeight,
       showBtn: true,  // 控制按钮盒子显示隐藏

        }

    },

    mounted() {

        window.onresize= ()=>{

            if(this.clientHeight>document.documentElement.clientHeight) {

               this.showBtn =false

            }else{

                this.showBtn = true

            }

        }

    }

 }

//  完美解决


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM