Vue 动态获取可视区高度,Vue监听窗口变化
链接:https://www.jianshu.com/p/37c73afb678b<div class="allposition_qw_content" ref="qwcontent" ></div>data() {fullHeight: '' ";//fullHeight: document.documentElement.clientHeight 屏幕高度 默认值}},
·
链接:https://www.jianshu.com/p/37c73afb678b
<div class="allposition_qw_content" ref="qwcontent" ></div>
data()
return{
fullHeight: '',//fullHeight: document.documentElement.clientHeight 屏幕高度 默认值
}
},
methods: {
changeFixed(fullHeight){ //动态修改样式
this.$refs.qwcontent.style.height =( 0.91*fullHeight - 200)+'px';
}
},
mounted() {
this.fullHeight= `${document.documentElement.clientHeight}`;//默认值
const that = this
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight
that.fullHeight = window.fullHeight
})()
}
},
watch: {
// 如果 `fullHeight ` 发生改变,这个函数就会运行
fullHeight :function(val) {
if(!this.timer) {
this.fullHeight = val
this.changeFixed(this.fullHeight)
console.log(val)
this.timer = true
let that = this
setTimeout(function (){//频繁触发 resize 函数,会导致页面很卡
that.timer = false
},100)
}
}
}
更多推荐
已为社区贡献60条内容
所有评论(0)