동적 폭 모드?

Question

여기 Vue.js 모달 데모를 가지고 놀았습니다 : https://vuejs.org/v2/examples/modal.html. 슬롯을 통해 모달 대화 상자로 표시하려는 내용을 편리하게 삽입 할 수 있습니다. 하나의 단점은 Modal이 Modal 구성 요소 내의 CSS를 통해 설정된 고정 너비라는 것입니다. 너비가 동적 인 경우 나 몸길에 전달하는 내용의 너비에 따라 결정되면 더 유용 할 것입니다.

나는했습니다 그것을 좀 더 유연한에 '폭'소품을 추가하여이 장착으로, 크기는 상위 구성 요소에 의해 설정 될 수 있도록 :

mounted(){ 
    if(this.width) { 
    $(".vue-modal .modal-container").css("width", this.width); 
    } 
} 

그것은하지만, 여전히 동적 아니다 , 물론, 나는 단지 고정 된 크기로 전달하고있다. 이 아이디어를 얻기위한 아이디어가 있는지 궁금합니다.

Answer 1

이것을 달성 할 수있는 한 가지 방법은 제공된 클래스를 대체하는 것입니다. modal-wrapper에 display: table-cell를 사용하여 반대로, 당신은 대신 인 flexbox 사용할 수 있습니다 그리고

.modal-wrapper { 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    height:100%; 
} 

을에 modal-container 당신은 inline-block에 display과 widthauto에 설정해야합니다

.modal-container{ 
    display:inline-block; 
    width:auto; 
} 

을

Here's your JSfiddle link based on VueJS's example