美文网首页
vue监听window.resize方法

vue监听window.resize方法

作者: 领家的小猫 | 来源:发表于2018-05-08 16:11 被阅读2346次

直接上代码

<template>
  <div id="app">
    <div :style="{width: `${screenWidth}px`}">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      screenWidth: document.body.clientWidth
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = val
    }
  }
}
</script>

相关文章

网友评论

      本文标题:vue监听window.resize方法

      本文链接:https://www.haomeiwen.com/subject/bslwrftx.html