vue项目之解决键盘弹起问题
在用vue做移动端项目时,当有输入框时,手机自带的键盘会把原本定位在底部的内容顶起。可以通过watch document.body.clientHeight的变化进行显示或隐藏定位在底部的内容。当document.body.clientHeight变小时,隐藏即可。for example:data () { return { documentHeight:document.b...
在用vue做移动端项目时,当有输入框时,手机自带的键盘会把原本定位在底部的内容顶起。可以通过watch document.body.clientHeight的变化进行显示或隐藏定位在底部的内容。当document.body.clientHeight变小时,隐藏即可。
for example:
data () {
return {
documentHeight:document.body.height,
showHeight:document.body.height,
isShow:true
}
}
mounted (){
window.onresize = () =>{
this.showHeight = document.body.height
}
}
watch: {
showHeight() {
if(this.documentHeight>this.showHeight){
this.isShow = false
}else{
this.isShow = true
}
}
}
html结构:
<div v-show='isShow'>
................
</div>
更多推荐
所有评论(0)