如何在 modal 中使用 affix?

[cdwmhcc]

如何在 modal 中使用 affix?

[hehehai]

@cdwmhcc 你好，是像这样吗 demo

ref

• modal-box
• affix-container

[cdwmhcc]

感谢回复。

示例中必须需要手动设置两个有高度的容器，这样的话滚动条会在 modal 的内部，modal 的自适应滚动会大大被限制。而 modal 本身是有滚动的，当 modal 的内容超过窗口的高度，在屏幕的最右侧它会自适应显示滚动条，如何绑定这个滚动。

<template>
  <a-button @click="handleClick">Open Modal</a-button>
  <a-modal
    width="auto"
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> Title </template>
    <div>
      <!-- 最外层需要设置一个有高度的容器 -->
      <div style="height: 200px; overflow: auto" ref="containerRef">
        <!-- 内层还需要设置一个有高度的容器 -->
        <div style="height: 400px; background: #cccccc; overflow: hidden">
          <a-affix :offsetTop="20" :target="containerRef" style="margin: 40px">
            <a-button type="primary">Affix in scrolling container</a-button>
          </a-affix>
        </div>
      </div>
    </div>
  </a-modal>

[hehehai]

嗯，大概明白你的意思了，目前 modal 还没有开放 body 的 ref。简单实现了下 demo 🤔 好像有闪烁出现

[cdwmhcc]

嗯，大概明白你的意思了，目前 modal 还没有开放 body 的 ref。简单实现了下 demo 🤔 好像有闪烁出现

感谢回复，我说的外层的滚动指的就是该滚动条在滚动时触发，而不是在 modal 内部再创建容器设定高度。

[hehehai]

你是指这样 demo？

[cdwmhcc]

你是指这样 demo？

哇，非常感谢您的帮助以及示例，就是这个！