html高度自适应vue,vue页面div高度自适应

第一种方式:

export default{

data(){

conheight:{

height:''

}

},

methods:{

getHeight(){

this.conheight.height=window.innerHeight-170+'px';

},

created(){

window.addEventListener('resize', this.getHeight);

this.getHeight()

}

}

第二种方式:

export default{

name:"Login",

data () {

return {

fullHeight: document.documentElement.clientHeight

}

},

watch: {

fullHeight (val) {//监控浏览器高度变化

if(!this.timer) {

this.fullHeight = val

this.timer = true

let that = this

setTimeout(function (){

that.timer = false

},400)

}

}

},

mounted () {

this.get_bodyHeight()

},

methods :{

get_bodyHeight () {//动态获取浏览器高度

const that = this

window.onresize = () => {

return (() => {

window.fullHeight = document.documentElement.clientHeight

that.fullHeight = window.fullHeight

})()

}

}

}

}

@import '../../assets/style/auth/loginOrReg.css';

你可能感兴趣的:(html高度自适应vue)