vue3使用ant-design-vue的Modal的小技巧

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的插槽，这个不能省略，不然就移动不了了。