Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use window.onresize in vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use _ window.onresize in vue.

The key points in the use of _ window.onresize

_ window.onresize can only be used in one component, so my solution is to use it in App.vue. Get document.documentElement.clientWidth (browser width) is stored in vuex. Other components only need to use computed (calculation property) to get the clientWidth of vuex, and then listen to the value of clientWidth through watch to trigger component events.

App.vue code

Export default {name: 'app', mounted () {_ window.onresize = () = > {this.clientWidthResize ()}}, methods: {clientWidthResize () {this.$store.commit (' Tool/resizeWidth', Number (document.documentElement.clientWidth))}

Tool.js code in store (modular development here)

Export default {namespaced: true, state: {clientWidth: 0}, getters: {}, mutations: {resizeWidth (state, clientWidth) {state.clientWidth = clientWidth;},}, actions: {},}

Component usage

Computed: {clientWidth () {return this.$store.state.Tool.clientWidth | | Number (document.documentElement.clientWidth)}}, watch: {clientWidth (val) {console.log (val)}}, _ window.onresize Note 1. Browser size change response event _ window.onresize = function () {....}

It should be noted here that the page size parameters obtained in the onresize response event handling are the changed parameters.

/ / what is obtained is the changed page width var currentWidth = document.body.clientWidth

If you need to use the parameters before the change, you need to create a global variable to hold the previous parameters (and remember to refresh the global variable to save the new parameter values in the onresize event).

two。 In Google browser

The _ window.onresize event is executed twice by default (occasionally only once, which is thought to be Chrome's bug by most accounts on the Internet).

Solution:

Generally speaking, it is recommended to create a new flag bit delay reset control which does not allow it to execute for the second time. The code is as follows:

Var firstOnResizeFire = true;// Google browser onresize event is executed twice, with a flag bit control _ window.onresize = function () {if (firstOnResizeFire) {NfLayout.tabScrollerMenuAdjust (homePageWidth); firstOnResizeFire = false; / / half a second later the flag bit is reset (Chrome's _ window.onresize is executed twice by default) setTimeout (function () {firstOnResizeFire = true;}, 500);} homePageWidth = document.body.clientWidth / / resave the new width} 3. Page size change event

Attention should be divided into two directions: the increase of the size and the decrease of the size.

At this point, I believe you have a deeper understanding of "how to use _ window.onresize in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.