.simple-modalbackground-color:rgba(0,0,0,0.5).modal-contentpadding1em.closecursorpointer.modal-dialog-resizable&.readymax-widthunset!important.modal-contentresizebothmargin0auto需求Bootstrap应该还是最流行的前端基础框架之一。由于其架构优势，它的侵入性非常低，可以通过多种方式集成到其他项目中。用于我厂各种产品。前两天老板抱怨他屏幕上的Modal（弹窗）太小了，浪费了他的5K显示器。我看了一下。按照Bootstrap的设计，超过1200px就被认为是XL。此时.modal-lg的宽度固定为1140px。其实Bootstrap的设计是有原因的，因为聚焦后人眼的宽度是有限的。弹窗太宽，一眼看不到内容，不好。不过我们厂的产品，弹窗要显示火焰图，宽一点也有好处。技术方案所以，总的来说，最合适的方式是给Modal加一个拖拽功能：如果用户觉得够大，就拖；选择重用。看过我的《用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸》的同学应该知道CSS的resize属性，可以很方便的给元素添加缩放功能。参考上面caniuse的流行程度，大部分新版浏览器都已经支持了，大家可以放心使用。在使用的时候要注意两点：第一，我们缩放一个元素的时候，也会同时影响到它的子元素和父元素。因为在静态文档流中，块级元素的宽度默认为父元素内容框的100%，而高度由子元素决定。因此，块级元素的缩放不能比其父元素宽（如果宽度有限），也不能比其子元素短。其次，拖动手柄的显示优先级很低，会被子元素覆盖，即使子元素没有填充任何内容。换句话说，只有带有填充的元素才适合添加调整大小缩放。总而言之，给哪个元素加这个属性是很有讲究的。具体到这个需求，BootstrapModal，最适合加resize属性的是modal-content，因为它有1rem的内边距。但是限制宽度的是父元素，也就是modal-dialog，它是响应式的，会根据显示的宽度设置一个最大宽度。如果不修改它的max-width，modal-content的最大宽度不能超过它，达不到预期的效果。但是，它不能更改为宽度。在这种情况下，弹出窗口将失去灵活性，并且在分辨率较低时表现不佳。所以我们还是要在max-width上做文章。如果直接去掉，modal-dialog的宽度会变成100%，弹窗效果也会丢失，所以你也不能这样做。最后我的解决办法是：窗口完全展开后，获取宽高，写上modal-content的样式，然后去掉modal-dialog的max-width。此时由于子元素modal-content已经固定了宽度，所以仍然是window样式，使用MutationObserver监听modal-content的宽高，并保存到localStorage中，这样完整的代码就可以了基于Vue开发，全局使用展示本厂产品，所以逻辑是用Vue组件实现的。为了方便在Codepen中展示，对效果演示进行了部分修改。https://codepen.io/meathill/p...代码及解释.modal.simple-modal(:style="{display:visibility?'block':'none'}",@click="doCloseFromBackdrop",).modal-dialog.modal-dialog-scrollable(ref="dialog",:class="dialogClass",).modal-content(ref="content",:).modal-header.p-2slot(name="header")h4{{title}}span.close(v-if="canClose",@click="doClose")×.modal-bodyslot(name="body").simple-modalbackground-color:rgba(0,0,0,0.5).modal-contentpadding1em.closecursorpointer.modal-dialog-resizable&.readymax-widthunset!important.modal-contentresizebothmargin0auto注意由于浏览器的异步加载机制，打开modal并完成布局后，高度和宽度可能会被内容拉长，导致录制不准确，或者内容被异常覆盖。读者找到自己的方法来处理它作为练习。综上所述，这种组件化开发非常符合我理想中的组件化模式：充分利用浏览器的原生机制，尽可能少用JS，需要什么功能就加什么。它不需要很大很完整。在MVVM框架的配合下，这样的方案很容易实现。另一方面，每个项目都有独特的使用场景。通过长期在特定场景下工作，我们可以逐步梳理出适合该场景的组件库，不断提升项目的开发效率。我认为这是组件化的正确方式。同时在我的博客上发布：
