VUE获取屏幕高度

最新推荐文章于 2024-08-09 10:35:30 发布

世俗ゝ

最新推荐文章于 2024-08-09 10:35:30 发布

阅读量5.5k

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/wangongchao/article/details/108070140

版权

1.HTML 在这里插入图片描述
2.JS

   data() {
      return {
        clientHeight: '',
      }
    },
        mounted() {
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}`          //document.body.clientWidth;
      //console.log(self.clientHeight);
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
        methods: {
      changeFixed(clientHeight) {                        //动态修改样式
        console.log(clientHeight);
        this.$refs.homePage.style.height = clientHeight + 'px';
        console.log( this.$refs.homePage.style.height,' this.$refs.homePage.style.height')

      },
    }

完事