Vue.js中如何调整vs-popup宽度，实现弹窗内容弹性适配？

之前改样式不生效的核心原因 #

vs-popup 是 Vuestic UI 组件库的内置弹窗，真正承载内容的弹窗容器是组件内部渲染生成的.vs-popup__content元素，不是你在外层挂了helundo类的那个挂载节点。如果在 scoped 样式里直接给外层类写宽度规则，会因为 Vue scoped 样式的作用域隔离机制，根本匹配不到内部的弹窗元素，自然改不动宽度。再加上组件本身内置了硬编码的默认最大宽度、内边距约束，哪怕直接给外层节点设宽度，也触达不到这些内置规则，最后就会出现“只有塞很多内容才被动把弹窗撑宽、出滚动条”的情况。

可直接落地的修改思路 #

• 用 Vue 的深度选择器穿透 scoped 样式的作用域限制，精准匹配弹窗内部的内容容器
• 宽度采用弹性写法：兼顾自定义的目标尺寸，同时适配不同大小的屏幕，避免小屏溢出
• 加高度阈值约束，让弹窗跟着内容自动调整高度，既不留多余空白，也不会超出屏幕边界

完整可运行的代码片段 #

<vs-button class="btn" @click="showModal = true" color="#7367F0"> Click me</vs-button>
<vs-popup 
  class="helundo" 
  title="How will i resize popup" 
  :active.sync="showModal"
>
  <div class="vx-row">
    <div class="vx-col w-full md:w-1/2 mb-base">
      <p> I want this content in the left</p>
    </div>
    <div class="vx-col w-full md:w-1/2 mb-base">
      <p> I want this content in the right</p>
    </div>
  </div>
</vs-popup>

<script>
export default {
  data () {
    return {
      showModal: false
    }
  }
}
</script>

<style scoped>
.helundo {
  /* 深度穿透匹配弹窗内部内容容器 */
  :deep(.vs-popup__content) {
    /* 自定义宽度：桌面端最大800px，小屏自动适配为视口的90% */
    width: min(90vw, 800px);
    max-width: 90vw;
    /* 调整内边距，缓解内容拥挤问题 */
    padding: 1.5rem;
    /* 高度弹性适配：内容少则自动收缩，内容过多时最高为视口的85%，内部出滚动条 */
    max-height: 85vh;
    overflow-y: auto;
    /* 统一弹窗圆角，和现有视觉风格匹配 */
    border-radius: 12px;
  }
}
</style>

最终实现效果 #

• 之前拥挤的左右两列布局，会在弹窗宽度达标后正常并排展示，不会因为默认窄宽度挤成上下堆叠的混乱状态
• 宽度完全可自定义：只要修改min(90vw, 800px)里的800px数值，就能调整成你需要的弹窗宽度
• 高度弹性适配：内容少的时候弹窗自动收缩高度，不会留大片无意义的空白；内容多到超出阈值时，弹窗内部自动出滚动条，不会把弹窗撑得超出屏幕范围
• 小屏设备下弹窗自动收窄到屏幕宽度的90%，不会出现横向滚动的问题

内容的提问来源于stack exchange，提问作者Quantum