Question

我一直在玩这里的Vue.js模态演示：https://vuejs.org/v2/examples/modal.html。它允许我通过插槽插入我想要显示为模式对话框的内容，这很方便。一个缺点是模态是固定宽度，通过Modal组件中的CSS设置。如果宽度是动态的，由我传入主体槽的内容的宽度决定，对我来说会更通用。

我通过添加'width'道具并使其更加灵活，因此可以通过父组件设置大小：

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

但它仍然不是动态的，当然，我只是传递一个固定的大小。我想知道是否有人有任何想法让这个工作？

Answer 1

您可以实现此目的的一种方法是覆盖提供的类。与在display: table-cell上使用modal-wrapper相反，您可以使用flexbox：

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

然后，在modal-container上，您只需将display设置为inline-block，将width设置为auto：

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

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

动态宽度模态？

1 个答案: