[vue div resize] 내부 화면 크기 조절하기 (onResize library를 겸한)

테이블을 사용하면서 고객이 칼럼의 크기를 자유롭게 조절해 달라고 요청이 들어왔다.

기존에 사용하던 테이블 태그를 버리고 div를 이용해서 테이블의 컬럼을 자유롭게 조절할 수 있도록 구현 한 내용을 

정리해 보고자 한다. 

 

인터넷에 검색하니까 잘 안나오더라..

 

처음에는 테이블을 구현하고

css 를 이용해서 resize 속성을 넣어서 좌우로 마우스를 이용해 조절하게 해놓았다. 

<div class="table">
    <div class="thead">
        <div class="tr">
            <div class="th">이름</div>
            ...
            ..
        </div>
    </div>
    <div class="tbody">
    </div>
</div>

<style lans="scss">
.table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .thead {
        .tr {
            display: flex;
            border-top: solid 1px rgb(186, 191, 199);
            border-bottom: solid 1px rgb(186, 191, 199);

            div {
                font-weight: bold;
                resize: horizontal;  //좌우 조절 
                overflow: auto;
                min-width: 60px;     // 최소 값 설정 (이 이상은 줄어들지 않음)
                &::-webkit-resizer {
                    background-color: transparent; (이게 조절하는 모양 없애주는거)
                }
            }

            .th {
                border-right: solid 1px rgb(186, 191, 199);
                box-sizing: border-box;
                color: rgb(24, 29, 31);
                height: 34px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f8f8f8;
            }
        }
    }
}
</style>

 

근데 vue에서 v-on:resize 로 이벤트를 받을 수 없어서 

이것 저것 찾던 중 resize 될때마다 호출 되게 할수 있고 resize에 대한 이벤트를 받을 수 있는 라이브러리가 있어서 

적용했다. 

 

내가 적용한 라이브러리 :vue-element-resize-detector

https://www.npmjs.com/package/vue-element-resize-detector

 

 

tag 에 [v-resize] 쓰고 [:resize]를 쓰면 사이즈 변할때 마다 자동으로 호출 된다.