Vue JS에서 부트스트랩 모달을 사용하는 방법

You'll make more money and earn more respect when you deliver quality code faster. Laranerds.dev helps you do just that. Sign up to be notified when new resources are published.

모달이 인기 있는 이유는 사용자가 현재 페이지의 컨텍스트를 방해하지 않고 무엇인가를 할 수 있도록 하는 좋은 방법이기 때문입니다.

응용 프로그램에서 몇 개 이상의 모달을 연결해야 할 것이 거의 확실하므로 익숙해질 가치가 있습니다.

Vue3 애플리케이션에서 부트스트랩 모달을 사용하는 방법에 대한 간단한 설명을 보려면 계속 읽으십시오.

모달을 열고 닫는 간단한 단계

아래의 모든 단계는 Vue3 Composition API 구문을 사용하여 설명됩니다.

응용 프로그램 템플릿에서 모달에 대한 부트스트랩 코드를 복사/붙여넣기합니다.

onMounted() 후크에서 모달 HTML 요소에 대한 dom을 쿼리하고 부트스트랩의 라이브러리를 사용하여 모달 개체를 초기화합니다.

필요에 따라 모달 개체에서 show() 및 hide()를 호출합니다.

모달 HTML

부트스트랩 문서에서 직접:

<template>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

점점 더 많은 모달을 템플릿에 배치함에 따라 코드에서 모달을 더 쉽게 찾을 수 있도록 일관된 명명 규칙을 제시하고 싶을 것입니다. 모달의 목적에 맞게 모달 ID의 이름을 바꾸고 싶습니다.

아래 비디오 연습에서 모달modal_demo의 이름을 지정합니다. 다른 비디오에서는 modal_client_form 또는 modal_client_delete_confirm 와 같은 모달 이름을 지정합니다.

귀하에게 의미가 있는 모든 규칙을 사용하십시오.

onMounted() 후크에서 모달 초기화

<script setup>

import { reactive, onMounted } from 'vue'

const state = reactive({
    modal_demo: null,
})

onMounted(() => {
    state.modal_demo = new bootstrap.Modal('#modal_demo', {})
})

function openModal()
{
    state.modal_demo.show()
}

function closeModal()
{
    state.modal_demo.hide()
}



</script>

모달 열기 및 닫기

모달의 id 속성을 변경하여 onMounted()에서 쿼리한 id와 일치시킵니다.

두 개의 닫기 버튼에서 data- 속성을 제거하고 대신 Vue @click 지시문을 추가합니다.

<template>

<!-- Button trigger modal -->
<button 
    type="button" 
    class="btn btn-primary" 
    @click="openModal" 
>
    Launch demo modal
</button>



<!-- Modal -->
<div class="modal fade" id="modal_demo" tabindex="-1" aria-labelledby="modal_demo_label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_demo_label">Modal title</h5>
        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

그게 다야!

새 모달을 추가하는 경우 openModal 및 closeModal 기능을 modal_demo_open() 및 modal_demo_close() 와 같이 보다 구체적인 것으로 변경할 수 있습니다. 물론 각 모달의 열기 및 닫기를 개별적으로 처리해야 합니다.

여기에서 위의 모든 작업을 볼 수 있습니다.