动态宽度模态？

Question

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

我通过添加一个 'width' 属性使其更加灵活，并将其作为已安装，以便可以由父组件设置大小：

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 上，您只需将display 设置为inline-block 并将width 设置为auto：

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

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