실시간 resize 확인 코드

반응형을 진행할 때 실시간으로 해상도를 체크해서 그에 따른 ui를 구현해 내야할 때가 있습니다. 

그럴 때 사용할 수 있는 코드입니다. 

---

HTML

  <div>
    <div class="size-container">
      <h2>width: {{ window.width }}</h2>
      <h2>height: {{ window.height }}</h2>
    </div>
  </div>

 

SCRIPT

export default {
  data() {
    return {
      window: {
        width: "",
        height: "",
      },
    };
  },
  mounted() {},
  created() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  destroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.window.width = window.innerWidth;
      this.window.height = window.innerHeight;
    },
  },
};

** 참고 ** 

created()에 resize이벤트 외에 메서드를 실행해주는 이유 : 

처음 Load될 때 사이즈도 체크해주기 위해서 입니다. 

구현화면