如何将 vuetify 对话框添加到现有应用程序中？

Question

我使用 vue cli 创建了一个 vue 对话框 app/component。它包含一个示例按钮，单击该按钮可模拟在单击现有应用程序上的 link 时如何加载对话框（我需要的）。我有几个问题。当使用 v-app 时，它添加了我不需要看到的应用程序包装器，因为它只是我想要的对话框。它创建了一个不需要的巨大空白。如果我删除它，它会出错 [Vuetify] Unable to locate target [data-app]，并且在使用现有应用程序中的 <div @click='getInformation('USA')'></div> 时不会加载对话框。

尝试删除 v-app 并仅使用模板，但仍然出错。似乎我仍然需要以某种方式指定 v-app。迷失在这里

关于我如何尝试实现但在 App.vue

中不起作用的示例

<template>
    <div v-resize="onResize">
        <v-dialog>
            <v-card>
            {{ information }}
            </v-card>
        </v-dialog>
    </div>
</template>

<script>

export default {
  data() {
    return {
      isMobile: false,
      information: []
    };
  },
  methods: {
    onResize() {
      if (window.innerWidth < 425) this.isMobile = true;
      else this.isMobile = false;
    },
    getInformatiom(country) {
        axios
          .get(`${api}/${country}/info`, {
            headers: {
              Authorization: `token`
            }
          })
          .then(response => {
            this.information = response.data.info;
          });   
    }
  }
};

main.js

import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

对话框组件已准备就绪，只是在从现有应用程序调用它时很难显示它。 请注意，现有应用程序不使用 Vue，它唯一的经典 asp，我只是将页面上的对话框更新为 look/work 更好地使用 vue/vuetify。 任何帮助将不胜感激

Answer 1

你需要带有 vuetify 的 v-app 元素。

尝试此操作以仅在显示对话框时使用该应用程序。然后使用CSS自定义v-app.

<v-app v-if='this.information && this.information.length'>
   <v-dialog>...</v-dialog>
</v-app>

Answer 2

我会使用 v-dialog 的 max-width 道具，通过添加 :max-width 使其动态化，然后将其绑定到订阅屏幕的计算属性尺寸。我不会尝试从外部 div 控制它。请在此处查看尺寸选项的完整列表 https://vuetifyjs.com/en/components/dialogs

如何将 vuetify 对话框添加到现有应用程序中？

How can I add vuetify dialog into existing application?

vue.js

vuejs2

vuetify.js

vue-cli

vue-cli-3