javascript - How can I monitor changing window sizes in Vue? - Stack Overflow

admin管理员组

文章数量:1134247

In my mobile web app with Vue, I want to hide my footer when the soft keyboard pops. So I have a little function to test the ratio of window height to window width...

showFooter(){
    return h / w > 1.2 || h > 560;
}

...and I declare window.innerHeight/window.innerWidth in my data.

    data: { h: window.innerHeight, w: window.innerWidth }

Trouble is, when window.innerHeight changes, my h property doesn't get the new value. How can I watch window.innerHeight ?

In my mobile web app with Vue, I want to hide my footer when the soft keyboard pops. So I have a little function to test the ratio of window height to window width...

showFooter(){
    return h / w > 1.2 || h > 560;
}

...and I declare window.innerHeight/window.innerWidth in my data.

    data: { h: window.innerHeight, w: window.innerWidth }

Trouble is, when window.innerHeight changes, my h property doesn't get the new value. How can I watch window.innerHeight ?

• javascript
• vue.js

Share Improve this question Follow edited Mar 13, 2023 at 18:24 miken32 42.7k1616 gold badges121121 silver badges171171 bronze badges asked Nov 10, 2017 at 9:15 bbsimonbbbbsimonbb 28.9k1818 gold badges8989 silver badges126126 bronze badges 1

• 1 Instead of doing it based on window width / height could you not do it on input / select / textarea focus? – Dan Gamble Commented Nov 10, 2017 at 9:33

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 149

To get the current window height of your browser as it changes, use this script:

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: window.innerHeight
    }
  },

  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    })
  },

  beforeDestroy() { 
    window.removeEventListener('resize', this.onResize); 
  },

  methods: {  
    onResize() {
      this.windowHeight = window.innerHeight
    }
  }
});

To display the information, use:

<div id="app">
 Current height: {{ windowHeight }}
</div>

VUE 2.7 and above

In Vue 2.7+, you can create a composable that returns a reactive width and breakpoint name.

import { computed, onMounted, onUnmounted, ref } from "vue"

export const useBreakpoints = () => {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))
  
  const type = computed(() => {
    if (windowWidth.value < 550) return 'xs'
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md'
    else return 'lg' // Fires when windowWidth.value >= 1200
  })

  const width = computed(() => windowWidth.value)

  return { width, type }
}

You can use it in the setup method of your components.

const { width, type } = useBreakpoints()

Note: If you would like this simplicity and also performance is crucial, you would want this computed only once. In that case, implement them using effect scopes, so that the events get added/removed only in that scope. Libraries like vueuse might have this taken care of, out-of-the-box.

Else, do this once in a scope close to the entry point, such as App.vue and commit it to your global state management solution or provide/inject it (please don't, just import the composable from a library).

The above answer didn't work for me. Instead, I used:

mounted() {
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

For those already using Vuetify, you can just watch this.$vuetify.breakpoint.width or this.$vuetify.breakpoint.height for changes in the viewport's dimensions.

Vuetify breakpoint docs

This is probably really too late but if you want a much more simpler approach you can do npm installation https://www.npmjs.com/package/vue-window-size and import windowWidth from 'vue-window-size';

Or this with composition api

    setup() {
        const windowSize = ref(window.innerWidth)
        onMounted(() => {
            window.addEventListener('resize', () => {windowSize.value = window.innerWidth} )
        })
        onUnmounted(() => {
            window.removeEventListener('resize', () => {windowSize.value = window.innerWidth})
        })
        return { 
            windowSize
        }
    }

My answer might be late but none of the above worked for me so here is what I found on this topic ! :)

https://codepen.io/sethdavis512/pen/EvNKWw

HTML :

<div id="app">
    <section class="section has-text-centered">
        <h1 class="title is-1">
            Your Window
        </h1>
        <h3 class="title is-3">
            Width: {{ window.width }} px<br/>
            Height: {{ window.height }} px
        </h3>
        <p class="has-text-white">
            &uarr;<br/>
            &larr; resize window &rarr;<br/>
            &darr;
        </p>
    </section>
</div>

CSS:

$top-color: yellow;
$bottom-color: tomato;

html, body, #app, section.section {
  height: 100%;
}

body {
    background: -webkit-linear-gradient($top-color, $bottom-color);
    background: -o-linear-gradient($top-color, $bottom-color);
    background: -moz-linear-gradient($top-color, $bottom-color);
    background: linear-gradient($top-color, $bottom-color);
}

section.section {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.title {
    color: white;
}

JS:

new Vue({
    el: '#app',
    data: {
        window: {
            width: 0,
            height: 0
        }
    },
    created() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },
    destroyed() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.window.width = window.innerWidth;
            this.window.height = window.innerHeight;
        }
    }
});

本文标签： javascriptHow can I monitor changing window sizes in VueStack Overflow