vue.js - Vuetify 在构建为 web 组件时不呈现 v-menu

我正在尝试使用 vue + vuetify 创建一个 Web 组件。

我知道 vuetify 不支持 Web 组件，但我还是决定试一试（为了运动）。

除了一些小事，比如必须手动导入 CSS，或手动注册所有 vuetify 组件，一切似乎都运行良好。

然而，我遇到了一个很大的障碍，那就是尝试<v-menu>在 Web 组件中使用。构建完成后，按钮一旦被点击就什么也不做。我在控制台中只收到一个警告：

console.ts:34 [Vuetify] Unable to locate target [data-app]

我已经尝试确保data-app存在，但无济于事。

我正在使用以下方法构建 Web 组件：

npx vue-cli-service build --target wc --name tl-test --inline-vue

当我将 vue 项目（通过运行yarn serve）与 Web 组件输出（dist/demo.html）进行比较时，我可以看到当我单击v-menu触发按钮时，下拉列表的 DOM 被创建并附加到页面 DOM。Web 组件似乎不会发生这种情况。

我错过了什么会阻止<v-menu>工作？

标签： vue.jswebpackvuetify.jsweb-component

您可以将 HTML 节点传递给v-menuattach的道具。

这将阻止 Vuetify 使用不适用于影子 DOM 的查询选择器。

例如：

<v-menu :attach="$parent.$el">
...
</v-menu>