Vue3+Vuetify：如何通过函数调用打开v-dialog而非HTML注入

你可以通过动态创建Vuetify组件实例并挂载到DOM的方式，实现类似Buefy的纯JS调用对话框，不用提前在HTML中写<v-dialog>节点。下面提供两种实用方案：

方案一：组件内直接动态创建 #

适合只在单个组件中使用的场景，直接在点击事件里生成对话框：

// 先导入必要的依赖
import { h, createApp } from 'vue';
import { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn } from 'vuetify/components';
import vuetify from '@/plugins/vuetify'; // 导入你的Vuetify实例

// 组件内的点击触发方法
const openConfirmDialog = async () => {
  // 1. 用h函数构建v-dialog的虚拟DOM结构
  const dialogNode = h(VDialog, {
    modelValue: true,
    persistent: true,
    // 监听对话框关闭事件，销毁组件并清理DOM
    'onUpdate:modelValue': (isOpen) => {
      if (!isOpen) {
        appInstance.unmount();
        document.body.removeChild(domContainer);
      }
    }
  }, {
    default: () => [
      h(VCard, {}, {
        default: () => [
          h(VCardTitle, { class: 'text-h5' }, '确认操作'),
          h(VCardText, {}, '你确定要执行这个操作吗？'),
          h(VCardActions, { class: 'justify-end' }, [
            h(VBtn, {
              variant: 'text',
              onClick: () => {
                appInstance.unmount();
                document.body.removeChild(domContainer);
              }
            }, '取消'),
            h(VBtn, {
              variant: 'flat',
              color: 'primary',
              onClick: () => {
                // 这里写确认后的业务逻辑
                console.log('用户确认了操作');
                appInstance.unmount();
                document.body.removeChild(domContainer);
              }
            }, '确认')
          ])
        ]
      })
    ]
  });

  // 2. 创建DOM容器并添加到页面
  const domContainer = document.createElement('div');
  document.body.appendChild(domContainer);

  // 3. 创建Vue实例并挂载对话框
  const appInstance = createApp({ render: () => dialogNode });
  appInstance.use(vuetify);
  appInstance.mount(domContainer);
};

方案二：封装全局对话框服务（推荐） #

如果需要在多个组件中调用，推荐封装成全局方法，完全复刻Buefy的this.$buefy.dialog.confirm()体验：

步骤1：创建对话框服务文件 #

新建src/services/dialog.js：

import { h, createApp } from 'vue';
import { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn } from 'vuetify/components';
import vuetify from '@/plugins/vuetify'; // 你的Vuetify实例

export const dialogService = {
  // 确认对话框
  confirm: (options = {}) => {
    return new Promise((resolve) => {
      // 合并默认配置与用户传入的选项
      const {
        title = '确认',
        message = '你确定要执行此操作吗？',
        cancelText = '取消',
        confirmText = '确认',
        persistent = true
      } = options;

      // 构建对话框结构
      const dialogNode = h(VDialog, {
        modelValue: true,
        persistent,
        'onUpdate:modelValue': (isOpen) => {
          if (!isOpen) {
            app.unmount();
            document.body.removeChild(el);
          }
        }
      }, {
        default: () => [
          h(VCard, {}, {
            default: () => [
              h(VCardTitle, { class: 'text-h5' }, title),
              h(VCardText, {}, message),
              h(VCardActions, { class: 'justify-end' }, [
                h(VBtn, {
                  variant: 'text',
                  onClick: () => {
                    resolve(false); // 用户取消，返回false
                    app.unmount();
                    document.body.removeChild(el);
                  }
                }, cancelText),
                h(VBtn, {
                  variant: 'flat',
                  color: 'primary',
                  onClick: () => {
                    resolve(true); // 用户确认，返回true
                    app.unmount();
                    document.body.removeChild(el);
                  }
                }, confirmText)
              ])
            ]
          })
        ]
      });

      // 挂载到DOM
      const el = document.createElement('div');
      document.body.appendChild(el);
      const app = createApp({ render: () => dialogNode });
      app.use(vuetify);
      app.mount(el);
    });
  },

  // 可扩展：添加alert、prompt等其他类型对话框
  alert: (options = {}) => {
    // 类似confirm的逻辑，只保留确认按钮
    // 实现代码略
  }
};

步骤2：注册全局属性 #

在main.js中把服务挂载到Vue全局：

import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import { dialogService } from './services/dialog';

const app = createApp(App);
app.use(vuetify);
// 注册为全局属性，方便组件调用
app.config.globalProperties.$dialog = dialogService;
app.mount('#app');

步骤3：组件中调用 #

// 选项式API
this.$dialog.confirm({
  title: '删除确认',
  message: '删除后无法恢复，确定继续？',
  cancelText: '我再想想',
  confirmText: '确定删除'
}).then((isConfirmed) => {
  if (isConfirmed) {
    // 执行删除逻辑
    console.log('用户确认删除');
  } else {
    console.log('用户取消操作');
  }
});

// 组合式API（需要借助getCurrentInstance）
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
proxy.$dialog.confirm({
  title: '操作提示',
  message: '操作已完成！'
}).then((res) => {
  console.log(res);
});

注意事项 #

• 确保Vuetify的样式已正确引入，否则对话框会出现样式异常
• 关闭对话框时必须执行unmount()和移除DOM节点，避免内存泄漏
• 可以根据业务需求扩展更多对话框类型（比如带输入框的prompt）
• 如果使用TypeScript，需要声明全局属性的类型，避免类型报错

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