vue.js 2.0으로 공개 부트 스트랩 모달

Question

누구나 vue 2.0으로 부트 스트랩 모달을 여는 방법을 알고 있습니까? vue.js 전에 간단히 jQuery를 사용하여 모달을 엽니 다. $('#myModal').modal('show');

그러나 Vue에서 적절한 방법이 있습니까?

감사합니다.

Answer 1

저는 Vue.js Modal example과 Bootstrap 3.* live demo의 아말감을했습니다.

기본적으로 Vue.js 모달 예제를 사용했지만 Vue.js "html"부분을 부트 스트랩 모달 html 마크 업으로 대체했습니다 (한가지는 저장하십시오). 나는 부트 스트랩 3에서 바깥 쪽 div을 떼어 내야했습니다.

관련 코드는 부트 스트랩에 관한 것입니다. 부트 스트랩 마크 업에서 외부 div를 제거하기 만하면됩니다. 그래서 ...

우, 개발자를위한 사이트와 나는 쉽게 코드에 붙여 넣을 수 없습니까? 이것은 나를 위해 계속 심각한 문제가되었습니다. 제가 유일한가요? 역사를 바탕으로 볼 때 나는 바보 같기 때문에 코드를 붙이는 쉬운 방법이 있습니다. 제발 조언 해주세요. 내가 시도 할 때마다, 그것은 기껏해야 포맷팅의 끔찍한 해킹이다. 요청한 경우 어떻게 수행했는지 샘플 jsfiddle을 제공합니다.

Answer 2

내 코드는 Michael Tranchida의 대답을 기반으로합니다.

HTML :

<div id="app"> 
    <div v-if="showModal"> 
    <transition name="modal"> 
     <div class="modal-mask"> 
     <div class="modal-wrapper"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" @click="showModal=false"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
       modal body 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </transition> 
    </div> 

    <button id="show-modal" @click="showModal = true">Show Modal</button> 
</div> 

JS :

new Vue({ 
    el: '#app', 
    data: { 
    showModal: false 
    } 
}) 

CSS :

.modal-mask { 
    position: fixed; 
    z-index: 9998; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, .5); 
    display: table; 
    transition: opacity .3s ease; 
} 

.modal-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
} 

그리고 당신의 모달 구성 요소가