1.getContainer。

  在使用Modal时,可选择是否挂载到某个HTML节点,一般不想让背面的方法被触发,会选择不挂载,这样Modal会默认挂载到和<div id="app"></div>同一级别下的节点上,遮罩会将app里面的内容覆盖,导致app里面的内容无法使用,只要把Modal关了就可以继续使用。

  而当我们想用背景的内容来操纵Modal里面的数据的时候,往往需要操作app里面的内容,例如点击按钮等等。这个时候就需要把Modal绑定到指定的节点上,博主一般选择在使用<a-modal>的同级别下新建一个div来让它挂载。

  而在官方文档中getContainer需要绑定的是HTMLElement类型的数据,所以我们可以这样写:

<template>
    <div>
        <div id="modalBox"></div>
        <a-button type="primary" @click="showModal">弹窗</a-button>
        <a-modal v-model:visible="visible" title="弹窗" :getContainer="getContainer">
          <p>测试</p>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"

const visible = ref<boolean>(false)

const showModal = () => {
    visible.value = !visible.value
}

const getContainer = () => {
  return document.getElementById("modalBox")
}

</script>

2. Modal移动

  移动弹窗的位置其实在官网就已经有了完整的代码了:

https://www.antdv.com/components/modal-cn#components-modal-demo-modal-render

通过使用vueuse来移动,需要注意的是<a-modal>里面多了一个modalRender的插槽,这个不能省略,不然就移动不了了。

Logo

前往低代码交流专区

更多推荐