vue前端动态获取页面高度宽度

Hrational

于 2024-05-22 15:05:40 发布

阅读量266

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/SDKL_YI/article/details/139120441

版权

  data() {
    return {
      // 设置页面某元素需要设置的高度宽度变量
      eleHeight: 0
      eleWidth: 0
    }
  },
  created() {
    // 初始化获取元素的高度宽度
    handleResize()
  },
  mounted() {
    // 绑定事件，窗口resize时候触发函数handleResize，这句是核心
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize(){
      // 根据窗口修改元素的大小
      this.eleHeight = window.innerHeight * 0.6
      this.eleWidth = window.innerWidth * 0.6
    }
  }