vue+element+iframe+ipad 项目遇到的一些bug

最新推荐文章于 2024-08-21 09:01:16 发布

bini000

最新推荐文章于 2024-08-21 09:01:16 发布

阅读量2.5k

点赞数

分类专栏： web 文章标签： vue element iframe ipad

本文链接：https://blog.csdn.net/bini000/article/details/85114835

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

公司项目用vue+Element ui 开发， pc端一直开发的好好的本来没什么问题但是最近老板发话要兼容ipad 调bug调到爆炸

1.嵌入iframe里面 ipad上页面划不动问题
页面卡顿原因大概是异步加载数据append到body的，ipad上body没形成滚动条。解决办法：

html,body,#app{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

加入上面的样式之后，页面上所有的弹出层，点开之后都出现了遮罩层在上面内容在下面的情况然后把#app去掉就可以了原因：未知

html,body{
	 height: 100%;
	 overflow: auto;
	 -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling: touch; 这个属性本来是ipad上用来滚动回弹滑动起来更流畅设置的
然后。。bug来了页面过长的时候点击某个操作后整个页面会空白然后我把这个属性去掉就可以了但是滑动起来又没有了流畅的效果在想解决办法

4.fixed定位在ipad上不起作用
5.iframe设置高度在ipad上不起作用默认会把内容撑开
6.element自带的Popover 在pc端的hover在ipad上变成了click 产品要求点击其他地方消失自己写了个指令

/**Popover  ipad兼容问题 */
Vue.directive('disnone', function (el) {
    el.addEventListener('click',function(event){
        event.stopPropagation();
        let list = document.getElementsByClassName('el-popover');
        for(let i = 0; i < list.length; i++){
            if(list[i].style.display == 'block'){
                list[i].style.display = 'none'
            }
        }
    })
});

7.如果元素设置了定位加入一个弹出层设置了absoute定位那么ipad上面input 元素聚焦的时候滑动弹出层光标也会随着滑动解决办法：写个指令让滑动的时候失焦

/**会员消费  滑动页面光标问题 */
Vue.directive('blur', function (el) {
    el.addEventListener('touchmove',function(event){
        let moneyInput = document.getElementById('moneyInput');
        let numberInput = document.getElementById('numberInput');
        if(moneyInput){
            moneyInput.blur()
        }
        if(numberInput){
            numberInput.blur;
        }
    })
});

8.element form表单只有一个表单元素的时候回车就会刷新页面，解决办法：
a. el-from 加上 @submit.native.prevent
b. 加入一个空的input <el-input style="display:none"></el-input>
原因：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。