DynamicDialog是否支持appendTo属性？如何挂载到指定元素而非body

虽然DynamicDialog没有直接暴露appendTo属性，但可以通过以下方式实现挂载到指定元素而非body：

方法一：调用open方法时指定挂载目标 #

在调用useDialog().open()时，直接在配置参数中添加appendTo字段，传入目标DOM元素即可：

import { useDialog } from 'primevue/usedialog';
import MyDialogComponent from './MyDialogComponent.vue';

const dialog = useDialog();

// 打开对话框时指定挂载元素
dialog.open({
  component: MyDialogComponent,
  appendTo: document.getElementById('custom-container'), // 替换为你的目标元素ID或DOM对象
  header: '自定义挂载的对话框',
  // 其他对话框配置项
});

方法二：全局配置默认挂载目标 #

如果希望所有DynamicDialog都默认挂载到指定元素，可以在注册时全局配置appendTo：

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import DynamicDialog from 'primevue/dynamicdialog';

const app = createApp(App);
app.use(PrimeVue);
app.component('DynamicDialog', DynamicDialog);

// 全局设置DynamicDialog的默认挂载目标
app.config.globalProperties.$dialog = useDialog({
  appendTo: document.getElementById('global-container')
});

方法三：结合Vue Teleport组件控制 #

如果需要更灵活的挂载控制，可以在自定义Dialog组件内部使用Vue的<Teleport>，将对话框内容直接传送至指定元素：

<template>
  <Teleport to="#teleport-target">
    <Dialog v-bind="$attrs" :visible="visible">
      <!-- 对话框内容 -->
    </Dialog>
  </Teleport>
</template>

<script setup>
import { Dialog } from 'primevue/dialog';
</script>

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