Vue3 (4) 썸네일형 리스트형 Vue + Tailwind에서 반응형 메뉴 구현 시 흔히 겪는 문제와 해결법 웹사이트에서 상단 메뉴를 구현할 때, PC에서는 hover로 메뉴가 열리고, 모바일에서는 클릭으로 메뉴가 열리는 방식을 자주 사용합니다.Vue 3 + + TailwindCSS 환경에서 반응형 디자인이 아닌 PC와 동일한 디자인을 적용할 때 겪은 시행착오와 해결 방법을 정리합니다.문제 상황모바일에서 동작을 위해 상위 메뉴 클릭시 모바일 여부와 메뉴 오픈 여부를 체크하여 하위메뉴를 보여주도록 적용한 뒤, PC에서는 hover로 하위 메뉴가 열리지만, 마우스를 아래로 내리는 순간 메뉴가 사라짐모바일에서는 클릭으로 하위 메뉴를 열어야 하는데, viewport가 고정되어 있어 window.innerWidth로는 모바일인지 구분이 안 됨v-show로 메뉴를 열어도 class="hidden"이 같이 적용돼서 메뉴가.. ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS) 🔧 ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS)이번에는 을 활용한 커스텀 다이얼로그를 직접 만들고, ref를 통해 프로그래밍적으로 제어할 수 있도록 구성해봅시다.✅ 구현 목표다이얼로그의 열기/닫기 기능을 ref로 제어title, message, confirmText, cancelText를 동적으로 전달onConfirm, onCancel 같은 이벤트 핸들러도 동적으로 바인딩🧱 Step 1. CustomDialog.vue 컴포넌트 구현 {{ state.title }} {{ state.message }} {{ state.cancelText }} .. Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기 Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, 을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.✅ 왜 대신 을 쓰나요?Framework7의 다이얼로그는 빠르게 만들 수 있지만:내부 마크업이 고정되어 있음TailwindCSS로 직접 커스터마이징하기가 제한적임반면 은 완전히 내 마음대로 마크업을 구성할 수 있어서,디자인 자유도와 유연성이 매우 높습니다.🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다: .. Vue 3에서 컴포넌트 간 데이터 변동을 감지하고 관리하는 주요 방법들 Vue 3는 컴포넌트 간 통신을 위한 다양한 방법을 제공합니다. 오늘은 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터 변동을 감지하는 주요 방법들에 대해 알아보겠습니다.1. Props와 Emits부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식에서 부모로 이벤트를 전달합니다. 부모 컴포넌트: 자식 컴포넌트: {{ message }} Send Update 2. v-model컴포넌트에서 간단한 양방향 바인딩을 구현할 때 사용합니다. 부모 컴포넌트: 입력값: {{ inputValue }} 자식 컴포넌트 (CustomInput): 3. provide/inject깊은 컴포넌트 트리에서 데이터를 전달할 때 유용합니다. 최상위 컴포넌트: 깊이 중첩된 자식 컴포넌트: {{ sh.. 이전 1 다음
