VUE에서 모달 또는 대화 상자 구성 요소를 만드는 방법은 무엇입니까?

modal.vue 구성 요소를 만들고 구성 API를 사용하여 ModelValue 및 Title을 수신하는 소품을 정의하고 Emit을 사용하여 업데이트를 트리거합니다. V-Model 양방향 바인딩을 달성하기위한 ModelValue 이벤트; 2. 슬롯을 사용하여 템플릿에 컨텐츠를 배포하고 기본 슬롯 및 이름이 지정된 슬롯 헤더 및 바닥 글을 지원합니다. 3. @click.self를 사용하여 마스크 레이어를 클릭하여 팝업 창을 닫으십시오. 4. 부모 구성 요소에서 모달을 가져 와서 Ref를 사용하여 디스플레이를 제어하고 숨기고 V- 모드와 함께 사용하십시오. 5. 선택적 향상에는 Escape Key Close 듣기, 전환 애니메이션 추가 및 Focus Lock이 포함됩니다. 이 모달 박스 구성 요소는 재사용 성, 유연성 및 기본 사용자 경험 보장을 가지고 있으며 VUE 3 기반 재사용 가능한 모달 박스 솔루션을 완전히 실현합니다.

VUE에서 모달 또는 대화 상자 구성 요소를 만드는 것은 간단하며 재사용 가능한 깨끗한 방식으로 수행 할 수 있습니다. VUE 3 (Composition API)을 사용하여 하나를 빌드하는 방법은 다음과 같습니다. 그러나 개념은 VUE 2에서 유사하게 작동합니다.

✅ 1. 모달 구성 요소를 만듭니다

Modal.vue 파일을 만들어 시작하십시오.

 <!-modal.vue->
<emplate>
  <div class = "modal-Overlay"v-if = "modelValue" @click.self = "onclose">
    <div class = "modal">
      <div class = "Modal-Header">
        <슬롯 이름 = "헤더">
          <h3> {{title}} </h3>
        </슬롯>
        <button @click = "close"> </button>
      </div>

      <div class = "modal-body">
        <슬롯 />
      </div>

      <div class = "modal-footer">
        <슬롯 이름 = "바닥기">
          <button @click = "close"> 닫기 </button>
        </슬롯>
      </div>
    </div>
  </div>
</템플릿>

<스크립트 설정>
const props = defineProps ({
  ModelValue : {
    유형 : 부울,
    필수 : True
  },
  제목: {
    유형 : 문자열,
    기본값 : &#39;모달&#39;
  }
});

const emit = defineemits ([ &#39;update : modelValue&#39;]);

함수 close () {
  emit ( &#39;update : modelValue&#39;, false);
}

함수 onclose () {
  // 배경 (오버레이)을 클릭 한 경우에만 닫힙니다
  닫다();
}
</스크립트>

<스타일 스코프 링>
.Modal-Overlay {
  위치 : 고정;
  상단 : 0;
  왼쪽 : 0;
  너비 : 100%;
  높이 : 100%;
  배경 : RGBA (0, 0, 0, 0.5);
  디스플레이 : Flex;
  정당화 컨텐츠 : 센터;
  정렬 구조 : 센터;
  Z- 인덱스 : 1000;
}

. 모달 {
  배경 : 흰색;
  Border-Radius : 8px;
  너비 : 90%;
  최대 세포 : 500px;
  Box-Shadow : 0 10px 30px rgba (0, 0, 0, 0.3);
}

. 모달 헤더 {
  디스플레이 : Flex;
  정당화 컨텐츠 : 공간 중간;
  정렬 구조 : 센터;
  패딩 : 1REM 1.5REM;
  국경-바닥 : 1px solid #eee;
}

. 모달 헤더 H3 {
  여백 : 0;
  글꼴 크기 : 1.2REM;
}

. 모달 헤더 버튼 {
  배경 : 없음;
  국경 : 없음;
  글꼴 크기 : 1.5REM;
  커서 : 포인터;
  색상 : #999;
}

. 모달 바디 {
  패딩 : 1.5REM;
}

.Modal-footer {
  패딩 : 1REM 1.5REM;
  테두리 탑 : 1px solid #eee;
  텍스트 정렬 : 맞습니다.
}

. 모달-발자 버튼 {
  패딩 : 0.5REM 1REM;
  배경 : #007bff;
  색상 : 흰색;
  국경 : 없음;
  Border-Radius : 4px;
  커서 : 포인터;
}
</스타일>

✅ 2. 부모 구성 요소에서 모달을 사용하십시오

이제 v-model 있는 모든 구성 요소에서 사용하십시오.

 <!-app.vue 또는 모든 부모->
<emplate>
  <div>
    <button @click = "showmodal = true"> Open Modal </button>

    <modal v-model = "showmodal"Title = "내 대화">
      <p> 이것은 모달 내용입니다. 여기에 무엇이든 넣을 수 있습니다. </p>

      <템플릿 #footer>
        <button @click = "showmodal = false"> 취소 </button>
        <button @click = "확인"> 확인 </button>
      </템플릿>
    </modal>
  </div>
</템플릿>

<스크립트 설정>
&#39;vue&#39;에서 {ref} 가져 오기;
&#39;./components/modal.vue&#39;에서 Modal 가져 오기;

const showmodal = ref (false);

함수 확인 () {
  경고 ( &#39;확인!&#39;);
  showmodal.value = false;
}
</스크립트>

✅ 주요 기능이 설명되었습니다

• v-model 바인딩 : modelValue Prop 및 update:modelValue 이벤트.
• 외부 클릭으로 클릭하십시오 : 오버레이 ( modal-overlay )는 클릭에 대한 리터닝이지만 @click.self 배경 (모달 자체가 아닌)이 클릭 될 때만 트리거됩니다.
• 슬롯 : 유연한 컨텐츠 허용 :
  • 본체의 기본 슬롯
  • 헤더/바닥 글로 명명 된 슬롯
• 접근성 및 UX : 닫기 버튼, 깨끗한 레이아웃, 반응 형 너비.

✅ 선택적 향상

추가하고 싶을 수도 있습니다.

• 탈출 키 지원 :

   WatchEffect (() => {
    if (props.modelValue) {
      const handler = (e) => e.key === 'Escape'&& close ();
      window.addeventListener ( '키 다운', 핸들러);
      OnUnmounted (() => window.removeEventListener ( 'keydown', handler));
    }
  });

• 부드러운 페이드 인/아웃을 위해 <transition></transition> 으로 전환 .
• 더 나은 접근성을 위해 모달 내부에 포커스 트래핑 .

---

그게 다야. VUE에는 사용자 정의 및 통합이 쉬운 재사용 가능한 유연한 모달 구성 요소가 있습니다. 기본적으로 v-model 통과하고 콘텐츠를 떨어 뜨립니다.



위 내용은 VUE에서 모달 또는 대화 상자 구성 요소를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!