테이블 드래그 스크롤 구현을 완성했는데 클릭 이벤트와 충돌이 생겨서 해결했던 방법에 대해 정리한 글입니다. 기존에 테이블 row 클릭시 다이얼로그가 열렸고 드래그 스크롤 기능을 추가하면서 클릭 이벤트와 겹치는 문제가 발생했습니다. click과 mouseup 기준을 찾아서 구분을 주고 click 이벤트일 경우 다이얼로그가 열리도록 구현을 해봅니다. MouseEvent MouseEvent 인터페이스는 사용자가 포인팅 장치(마우스)와 상호 작용하여 발생하는 이벤트를 나타냅니다. 이 인터페이스를 사용하는 일반적인 이벤트는 다음과 같습니다. click, dblclick, mouseup, mousedown. Element: mouseup event mouseup 이벤트는 포인터가 내부에 있는 동안 포인팅 장치(예:..
[Vue.js] 컴포넌트 내 scoped style에 스타일이 적용 되지 않을때 v-deep으로 해결
deep selector란? 부모 컴포넌트에서 자식 컴포넌트에 영향을 미치게 하려면, >>> (deep selector) 를 사용할 수 있다 deep selector 적용하는 방법 3가지 글쓴이는 회사에서는 vue2를 사용하고 있으므로 ::v-deep . child-class로 사용합니다. vue3를 사용하고 있다면 ::v-deep(.child-class)로 사용합니다 1. 각 컴포넌트별 클래스 스타일 추가 부모(Parent) 컴포넌트 Parent 컴포넌트입니다 자식(Child) 컴포넌트 Child 컴포넌트입니다 2. 부모 컴포넌트에서 자식 컴포넌트 클래스 스타일 추가 scoped 속성 때문에 현재 컴포넌트 내에서만 스타일 적용이 가능하다 부모(Parent) 컴포넌트 Parent 컴포넌트입니다 자식(Ch..
Object.assign(target, ...sources) var obj = {a:1}; var copy = Object.assign({}, obj); console.log(copy); // {a: 1} 6. 객체를 좀 더 쉽게 병합하는, Object.assign 메서드 안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 객체를 병합하는 메서드인 object.assign 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식 부터 보시겠습니다. Object.assign( target , ... sources ) ob.. pro-self-studier.tistory.com 회원 수정 페이지에서 등록페이지를 클릭시 data를 초기화 시켜야하는 상황에서 사용함 Object.assign(this.$data, thi..