如何将Quasar Dialog挂载到根组件或指定父组件下

动态Dialog指定挂载节点解决方案 #

通用方案（适配所有自定义/封装Dialog场景） #

无论你是手写Dialog组件还是二次封装UI库组件，都可以通过手动指定挂载节点解决provide/inject上下文丢失问题：

• 挂载到div#app节点
  创建Dialog实例后，替换默认的body挂载逻辑，改为获取#app节点挂载即可，Vue3示例：

  import { createApp } from 'vue'
  import CustomDialog from './CustomDialog.vue'
  
  const openDialog = () => {
    // 创建实例
    const dialogApp = createApp(CustomDialog)
    // 创建临时挂载容器
    const mountRoot = document.createElement('div')
    // 把容器插入#app下
    document.querySelector('#app').appendChild(mountRoot)
    // 挂载实例
    dialogApp.mount(mountRoot)
  }
  

• 挂载到指定父组件下
  在父组件中通过ref获取自身DOM节点，将Dialog容器插入该节点即可，完全继承父组件的provide/inject链路：

  <!-- 父组件代码 -->
  <template>
    <div ref="parentDom">
      <!-- 父组件其他业务内容 -->
    </div>
  </template>
  <script setup>
  import { ref, getCurrentInstance } from 'vue'
  import { createApp } from 'vue'
  import CustomDialog from './CustomDialog.vue'
  
  const parentDom = ref(null)
  // 拿到当前父组件的上下文，保证全局依赖可用
  const { appContext } = getCurrentInstance()
  
  const openDialog = () => {
    const dialogApp = createApp(CustomDialog)
    // 继承父组件全局配置、注入内容
    dialogApp.config.globalProperties = appContext.config.globalProperties
    dialogApp._context = appContext
  
    const mountRoot = document.createElement('div')
    parentDom.value.appendChild(mountRoot)
    dialogApp.mount(mountRoot)
  }
  </script>
  

主流UI库内置配置方案 #

常用UI库已经封装了挂载节点配置项，不需要手动修改挂载逻辑：

• Element UI/Element Plus：
  全局调用Dialog时添加append-to-body: false会默认挂载到父组件下；需要指定其他节点时传入append-to参数，值为目标DOM的选择器或者DOM实例即可，示例：

  this.$dialog({
    title: '测试弹窗',
    appendTo: () => document.querySelector('#app')
  })
  

  模板声明用法：<el-dialog :append-to="() => document.querySelector('#app')" />
• Ant Design Vue：
  调用全局Modal方法时传入getContainer参数，返回目标挂载节点即可，示例：

  Modal.confirm({
    title: '测试弹窗',
    getContainer: () => document.querySelector('#app')
  })
  

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