vue代码

<template>
  <div>寬:{{screenWidth}} 高:{{screeHeight}}</div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: 1000, //宽屏幕尺寸
      screeHeight: 1000
    };
  },

  mounted() {
    //获取屏幕长宽
    (this.screenWidth = document.documentElement.clientWidth),
      (this.screeHeight = document.documentElement.clientHeight),
      (window.onresize = () => {
        //屏幕尺寸变化就重新赋值
        return (() => {
          this.screenWidth = document.documentElement.clientWidth;
          this.screeHeight = document.documentElement.clientHeight;
        })();
      });
  }
};
</script>

<style scoped>
</style>

 效果图

 

posted on 2023-02-25 23:23  鲤斌  阅读(495)  评论(0)    收藏  举报