Vue resize監聽視窗變化
阿新 • • 發佈:2019-02-07
一、在Vue單個頁面運用
<template>
<div id="divId">
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: document.documentElement.clientWidth,//螢幕寬度
screenHeight: document.documentElement.clientHeight,//螢幕高度
}
},
watch:{
'screenWidth':function(val){ //監聽螢幕寬度變化
var oIframe = document.getElementById(divId);
oIframe.style.width = (Number(val)-120) + 'px'; //'120'是頁面佈局調整,可去除
},
'screenHeight':function(){ //監聽螢幕高度變化
var oIframe = document.getElementById(divId);
oIframe.style.height = (Number(val)-120) + 'px'; //'120'是頁面佈局調整,可去除
}
},
mounted() {
var _this = this;
window.onresize = function(){ // 定義視窗大小變更通知事件
_this.screenWidth = document.documentElement.clientWidth; //視窗寬度
_this.screenHeight = document.documentElement.clientHeight; //視窗高度
};
}
}
</script>
二、在專案中全域性運用
1、在store.js裡定義
let state = {
screenWidth:document.documentElement.clientWidth, //螢幕寬度
screenHeight:document.documentElement.clientHeight, //螢幕高度
}
2、在main.vue裡掛載window.onresize
mounted() {
var _this = this;
window.onresize = function(){ // 定義視窗大小變更通知事件
_this.$store.state.screenWidth = document.documentElement.clientWidth; //視窗寬度
_this.$store.state.screenHeight = document.documentElement.clientHeight; //視窗高度
};
}
3、在Vue頁面中監聽
<template>
<div id="divId">
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: document.documentElement.clientWidth,//螢幕寬度
screenHeight: document.documentElement.clientHeight,//螢幕高度
}
},
watch:{
'$store.state.screenWidth':function(val){ //監聽螢幕寬度變化
var oIframe = document.getElementById(divId);
oIframe.style.width = (Number(val)-120) + 'px'; //'120'是頁面佈局調整,可去除
},
'$store.state.screenHeight':function(){ //監聽螢幕高度變化
var oIframe = document.getElementById(divId);
oIframe.style.height = (Number(val)-120) + 'px'; //'120'是頁面佈局調整,可去除
}
}
}
</script>
注意事項
1、在專案中 window.onresize只能掛載一次,在多個頁面中同時掛載 window.onresize時,只有其中一個 window.onresize會起作用
2、避免 window.onresize頻繁掛載(待續)