如何在Vue中使用窗口大小？ （如何检测软键盘？）

Question

在我使用Vue的移动网络应用程序中，我想在软键盘弹出时隐藏我的页脚。所以我有一个小功能来测试窗口高度与窗口宽度的比率......

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

...我在我的数据中声明了window.innerHeight / window.innerWidth。

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

麻烦的是，当window.innerHeight改变时，我的h属性没有获得新值。我该怎么看window.innerHeight？

Answer 1

我确信有更好的方法可以做到这一点，但是这个方法对你有用，直到我想出一些东西：

基本上你只需要一个数据道具和一个观察者就可以做到这一点。

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: 0,
      txt: ''
    }
  },

  watch: {
    windowHeight(newHeight, oldHeight) {
     this.txt = `it changed to ${newHeight} from ${oldHeight}`;
    }
  },

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

这将输出更改jsfiddle example

<div id="app">
  <br> Window height: {{ windowHeight }} <br/>
  {{ txt }}
</div>

Answer 2

以上答案对我不起作用。相反，我使用了：

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

Answer 3

对于已经使用Vuetify的用户，您只需观看this.$vuetify.breakpoint.width或this.$vuetify.breakpoint.height即可查看视口尺寸的变化。

Vuetify breakpoint docs

Answer 4

VUE 3

在Vue 3中，您可以创建一个可以返回宽度的合成函数。您可以轻松地在多个组件之间重用该函数（useBreakpoints.js）。

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

export default function () {
  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 > 549 && windowWidth.value < 1200) return 'md'
    if (windowWidth.value > 1199) return 'lg'
  })

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

  return { width, type }
}

您可以按如下所示在vue 3组件的设置方法中使用它。

const { width, type } = useBreakpoints()

Answer 5

这可能真的太晚了，但如果您不想使用更简单的方法，则可以进行 npm 安装 https://www.npmjs.com/package/vue-window-size 和import windowWidth from 'vue-window-size';

或者这个与组合 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
        }
    }