如何在 Vuetify 的对话框中打开 html 页面？ - VueJS答案

【问题标题】：How to open html page in dialog in Vuetify? - VueJS如何在 Vuetify 的对话框中打开 html 页面？ - VueJS
【发布时间】：2018-07-15 13:22:05
【问题描述】：

我尝试在 vuetify 中打开另一个页面，使用 window.open (http://url) 并在操作后返回主窗口以使用一些数据更新它。但是，我需要以模式打开页面。而window.showModalDialog() 不行

我正在使用以下功能：

"dependencies": {
    "axios": "^0.16.1",
    "devour-client": "^1.4.3",
    "lodash": "^4.17.4",
    "papaparse": "^4.3.3",
    "vee-validate": "^2.0.0-rc.27",
    "vue": "^2.2.6",
    "vue-i18n": "^7.0.5",
    "vue-kindergarten": "^0.3.0",
    "vue-moment": "^2.0.2",
    "vue-router": "^2.5.3",
    "vue2-dropzone": "^2.0.0",
    "vuetify": "^0.12.7",
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2"
  },

我正在建立 Oauth2 到 Clio App 的连接，使用后端作为生成身份验证令牌的中间件。

知道如何在对话框中打开一个 html 页面并返回主窗口并更新数据吗？

【问题讨论】：

标签： vue.js modal-dialog vuetify.js

【解决方案1】：

如何使用 Vuetify v-dialog 组件，并且对于它的内容，在你的 HTML 页面中有一个 iframe？喜欢this。

<v-dialog v-model="dialog" width="100%">
 <v-btn color="primary" dark slot="activator">Open Dialog</v-btn>
  <v-card>
   <iframe style="width:100%" src="https://vuetifyjs.com"></iframe>
  </v-card>
 </v-dialog>

【讨论】：