如何增大NuxtUI中UModal组件的弹窗宽度？

NuxtUI的UModal默认仅提供默认尺寸和全屏选项，但可以通过以下几种方式自定义弹窗宽度：

• 内联样式直接设置
  直接在组件上绑定style属性，覆盖默认的max-width限制：

  <UModal v-model="isOpen" :style="{ maxWidth: '900px', width: '100%' }">
    <!-- 你的弹窗内容 -->
  </UModal>
  

  其中width: '100%'用于让弹窗在max-width范围内自适应宽度，也可根据需求设置固定宽度值。

• 自定义CSS类复用
  若需在多处复用自定义宽度，可定义专属CSS类：

  /* 组件内<style>标签或全局样式文件中添加 */
  .custom-modal-width {
    max-width: 800px;
    width: 90%; /* 适配不同屏幕宽度 */
  }
  

  然后给UModal添加该类：

  <UModal v-model="isOpen" class="custom-modal-width">
    <!-- 你的弹窗内容 -->
  </UModal>
  

• 使用Tailwind CSS类（推荐）
  由于NuxtUI基于Tailwind CSS，直接使用Tailwind宽度类更便捷：

  <!-- 使用Tailwind预设尺寸类 -->
  <UModal v-model="isOpen" class="max-w-4xl w-full">
    <!-- 你的弹窗内容 -->
  </UModal>
  
  <!-- 或者自定义精确宽度值 -->
  <UModal v-model="isOpen" class="max-w-[850px] w-full">
    <!-- 你的弹窗内容 -->
  </UModal>
  

官方文档未单独列出该调整方法，是因为这类样式定制属于通用的CSS/Tailwind覆盖场景，不属于组件专属API配置范畴。

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