vue中window.onresize的使用解析
window.onresize的使用
說(shuō)下重點(diǎn)
window.onresize只能在一個(gè)組件中使用，如果多個(gè)組件調(diào)用則會(huì)出現(xiàn)覆蓋情況，所以我的解決方案是在App.vue中使用，獲取document.documentElement.clientWidth（即瀏覽器寬度）存放在vuex中，別的組件只需要用computed(計(jì)算屬性)將vuex的clientWidth獲取，然后通過(guò)watch監(jiān)聽clientWidth的值，即可觸發(fā)組件事件
App.vue代碼
<script>
export default {
? name: 'app',
? mounted () {
? ? window.onresize = () => {
? ? ? this.clientWidthResize()
? ? }
? },
? methods: {
? ? clientWidthResize () {
? ? ? this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
? ? }
? }
}
</script>store中tool.js代碼（此處進(jìn)行模塊化開發(fā)）
export default {
? namespaced: true,
? state: {
? ? clientWidth: 0
? },
? getters: {},
? mutations: {
? ? resizeWidth(state, clientWidth) {
? ? ? state.clientWidth = clientWidth;
? ? },
? },
? actions: {},
}組件使用
computed: {
? clientWidth () {
? ? return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
? }
},
watch: {
? clientWidth (val) {
? ? console.log(val)
? }
},window.onresize筆記
1.瀏覽器尺寸變化響應(yīng)事件
?window.onresize = function(){....}這里需要注意的是，onresize響應(yīng)事件處理中，獲取到的頁(yè)面尺寸參數(shù)是變更后的參數(shù)。
// 獲取到的是變更后的頁(yè)面寬度 var currentWidth = document.body.clientWidth;?
如果需要使用到變更之前的參數(shù)，需要建一個(gè)全局變量保存之前的參數(shù)（并且記得在onresize事件中刷新這個(gè)全局變量保存新的參數(shù)值）。
2.谷歌瀏覽器中
window.onresize事件默認(rèn)會(huì)執(zhí)行兩次（偶爾也會(huì)只執(zhí)行一次，網(wǎng)上大部分說(shuō)法認(rèn)為這是Chrome的bug）。
解決方法：
一般來(lái)說(shuō)推薦新建一個(gè)標(biāo)志位 延時(shí)復(fù)位控制它不讓它自己執(zhí)行第二次，代碼如下：
var firstOnResizeFire = true;//谷歌瀏覽器onresize事件會(huì)執(zhí)行2次，這里加個(gè)標(biāo)志位控制
?
window.onresize = function()
{
?if (firstOnResizeFire) {
? NfLayout.tabScrollerMenuAdjust(homePageWidth);
? firstOnResizeFire = false;
??
? //0.5秒之后將標(biāo)志位重置（Chrome的window.onresize默認(rèn)執(zhí)行兩次）
? setTimeout(function() {
? ?firstOnResizeFire = true;
? ? ? ? }, 500);
?}?
?homePageWidth = document.body.clientWidth; //重新保存一下新寬度
}3.頁(yè)面尺寸變更事件
注意要分為尺寸增大和尺寸變小兩個(gè)方向考慮。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何解決vue2.0下IE瀏覽器白屏問(wèn)題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于對(duì)vue生命周期的深入理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個(gè)簡(jiǎn)單的Demo實(shí)例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
在vue中，有時(shí)候你需要對(duì)data中的數(shù)據(jù)進(jìn)行處理，或者對(duì)抓取的數(shù)據(jù)進(jìn)行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時(shí)候你就需要計(jì)算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個(gè)實(shí)例并附代碼解釋2023-02-02
vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)父組件提交校驗(yàn)多個(gè)子組件
這篇文章主要為大家詳細(xì)介紹了vue3如何實(shí)現(xiàn)父組件在提交事件中校驗(yàn)多個(gè)子組件中的form件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11