Vue - 노션 클론, 화면 리사이징

interactjs

요소를 늘리고 줄일 수 있는 패키지

npm i interactjs

import 후 사용

import interact from "interactjs";

contenteditable에 placeholder 추가하는 법

속성 선택자로 선택 후 가상 선택자 empty에 before를 생성
content에 attr함수로 placeholder 속성을 대입

contenteitable 전체 스타일

<br> 태그가 남아있는 경우가 있으므로 trim() 함수로 textContent를 확인해서 내부가 비었으면 비우도록 구현

종종 Vuejs의 최적화로 인해 데이터가 같으면 화면을 바꾸지 않는 문제가 발생한다.

key 속성을 주면 페이지가 변경 되었다는 것을 인식하여 페이지가 빠른 속도로 변경되었을 때 내용이 그대로 남아있는 현상을 해결할 수 있다.