[Vue.js] Vue.js에서 Resize 이벤트 처리하기

기존에는 HTML 요소에 일일이 CSS로 height를 줘서 높이를 처리하곤 했었는데 vue의 Resize이벤트를 사용하여 CSS 없이 간단하고 깔끔한 코드를 작성해보고자 한다.

 

*Javascript기반의 Vue.js, Vue.js 기반의 quasar프레임워크를 사용하고 있다.

 

Resize 이벤트

<template>
    <div ref="headerDiv">
    </div>
    <div :headerHeight="this.conditionHeight" @resize="onResize">
    </div>
</template>

<script>
export default {
    data() {
        return {
          conditionHeight: 100
        }
    },
    methods: {
        onResize () {
          this.$nextTick(function () {
            this.conditionHeight = this.$height(this.$refs.headerDiv.$el) + 30
          })
        }
    }
}
</script>

 

 

결론부터 말하자면 headerDiv라는 참조를 가진 엘리먼트의 높이에  30을 더한 값을 conditionHeight 데이터 속성에 할당하는 코드이다.

 

 

<script>섹션에서 this.$refs.headerCard.$el을 사용하여 headerCard DOM의 엘리먼트 높이를 가져오고, 그 높이에 30을 더한 값을 conditionHeight에 할당한 뒤 이후에 그 높이를 conditionHeight에 반영시킨다.

또한 nextTick함수를 사용하여 DOM엘리먼트의 크기를 변경한 후 해당 변경 사항이 뷰에 반영되기를 기다린다.

 

이렇게 되면 화면에서 엘리먼트의 높이를 동적으로 조정하고 그 값을 Vue 컴포넌트의 conditionHeight 데이터 속성에 저장 한다. 그러면 이후에 해당 데이터 속성을 다른 부분에 바인딩하여 사용 할 수 있다.

 

우리 회사가 제작하는 화면은 상단에 검색을 위한 HTML요소가 있고 하단에 정보를 표시하는 HTML요소가 존재하는 통일적인 구조의 화면이기 때문에 resize 이벤트를 사용하면 높이를 맞출 때 검색쪽 HTML 요소의 높이에 관계없이 

this.conditionHeight = this.$height(this.$refs.headerDiv.$el) + 30

뒤쪽 숫자만 변경해주면 되기 때문에 아주 편리하게 사용할 수 있다.