vue监听window.resize方法

最新推荐文章于 2023-03-08 15:44:52 发布

原创最新推荐文章于 2023-03-08 15:44:52 发布 · 842 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了一个使用Vue.js实现的响应式布局方案，通过监听屏幕宽度的变化调整页面元素的宽度，确保了不同设备上的一致视觉体验。

<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>