tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
15.88k stars 1.66k forks source link

n-modal 支持设置最高高度,超出在modal区域内滚动 #4848

Open laterdayi opened 1 year ago

laterdayi commented 1 year ago

This function solves the problem (这个功能解决的问题)

n-modal 支持设置最高高度,超出在modal区域内滚动

Expected API (期望的 API)

 <n-modal v-model:show="showModal" max-height='40'  preset="dialog" title="Dialog">
    <template #header>
      <div>标题</div>
    </template>
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
    .....
    <template #action>
      <div>操作</div>
    </template>
  </n-modal>
yudan215 commented 1 year ago

这个可以自己加样式解决的

laterdayi commented 1 year ago

想能支持 设个最大高度,让 modal content 自行滚动

DvShu commented 10 months ago

Modal 能否设置只滚动 content 不滚动 header 和 footer

我不想让红框部分参与滚动,我看了一下,因为 scrollbar 的原因,好像不行。

ZhaoRd commented 1 month ago

添加全局样式

/ n-modal s / .n-modal-container { .n-scrollbar-content.n-modal-scroll-content { height: 100%;

.n-modal {
  max-height: 75%;

  .n-card__content {
    overflow: auto;
  }
}

} } / n-modal e /

ZhaoRd commented 1 month ago

挺奇怪的,在vue文件中设置 :deep 都不能覆盖样式