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

【问题标题】：How can I add vuetify dialog into existing application?如何将 vuetify 对话框添加到现有应用程序中？
【发布时间】：2019-07-15 18:35:08
【问题描述】：

我使用 vue cli 创建了一个 vue 对话框应用程序/组件。它包含一个示例按钮，单击该按钮可模拟单击现有应用程序上的链接时如何加载对话框（我需要什么）。我有几个问题。使用 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，我只更新页面上的对话框以使用 vue/vuetify 更好地查看/工作。任何帮助将不胜感激 p>

【问题讨论】：

只是为了反思，你不觉得你为一个对话框添加了太多的库吗？
很好，我同意。会改变的。

标签： vue.js vuejs2 vuetify.js vue-cli vue-cli-3

【解决方案1】：

您需要使用 vuetify 的 v-app 元素。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：