Commit 4a8129bffa9e3928c56333e29f5874f55a079764
1 parent
833ac54a
v3.6.0 封装iframe组件
Showing
8 changed files
with
66 additions
and
88 deletions
yudao-ui-admin/src/components/iFrame/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div v-loading="loading" :style="'height:' + height"> | |
| 3 | + <iframe | |
| 4 | + :src="src" | |
| 5 | + frameborder="no" | |
| 6 | + style="width: 100%; height: 100%" | |
| 7 | + scrolling="auto" | |
| 8 | + /> | |
| 9 | + </div> | |
| 10 | +</template> | |
| 11 | +<script> | |
| 12 | +export default { | |
| 13 | + props: { | |
| 14 | + src: { | |
| 15 | + type: String, | |
| 16 | + required: true | |
| 17 | + }, | |
| 18 | + }, | |
| 19 | + data() { | |
| 20 | + return { | |
| 21 | + height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 22 | + loading: true, | |
| 23 | + url: this.src | |
| 24 | + }; | |
| 25 | + }, | |
| 26 | + mounted: function () { | |
| 27 | + setTimeout(() => { | |
| 28 | + this.loading = false; | |
| 29 | + }, 300); | |
| 30 | + const that = this; | |
| 31 | + window.onresize = function temp() { | |
| 32 | + that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 33 | + }; | |
| 34 | + } | |
| 35 | +}; | |
| 36 | +</script> | ... | ... |
yudao-ui-admin/src/views/infra/druid/index.vue
| 1 | 1 | <template> |
| 2 | - <div v-loading="loading" :style="'height:'+ height"> | |
| 3 | - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 4 | - </div> | |
| 2 | + <i-frame :src="url" /> | |
| 5 | 3 | </template> |
| 6 | 4 | <script> |
| 5 | +import iFrame from "@/components/iFrame/index"; | |
| 7 | 6 | export default { |
| 8 | 7 | name: "Druid", |
| 8 | + components: { iFrame }, | |
| 9 | 9 | data() { |
| 10 | 10 | return { |
| 11 | - src: process.env.VUE_APP_BASE_API + "/druid/index.html", | |
| 12 | - height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 13 | - loading: true | |
| 11 | + url: process.env.VUE_APP_BASE_API + "/druid/index.html" | |
| 14 | 12 | }; |
| 15 | 13 | }, |
| 16 | - mounted: function() { | |
| 17 | - setTimeout(() => { | |
| 18 | - this.loading = false; | |
| 19 | - }, 230); | |
| 20 | - const that = this; | |
| 21 | - window.onresize = function temp() { | |
| 22 | - that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 23 | - }; | |
| 24 | - } | |
| 25 | 14 | }; |
| 26 | 15 | </script> | ... | ... |
yudao-ui-admin/src/views/infra/server/index.vue
| 1 | 1 | <template> |
| 2 | - <div v-loading="loading" :style="'height:'+ height"> | |
| 3 | - <iframe ref="iframe" :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 4 | - </div> | |
| 2 | + <i-frame :src="url" /> | |
| 5 | 3 | </template> |
| 6 | 4 | <script> |
| 5 | +import iFrame from "@/components/iFrame/index"; | |
| 7 | 6 | export default { |
| 8 | - name: "Server", | |
| 7 | + name: "Druid", | |
| 8 | + components: { iFrame }, | |
| 9 | 9 | data() { |
| 10 | 10 | return { |
| 11 | - src: process.env.VUE_APP_BASE_API + "/admin", | |
| 12 | - height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 13 | - loading: true | |
| 11 | + url: process.env.VUE_APP_BASE_API + "/admin" | |
| 14 | 12 | }; |
| 15 | 13 | }, |
| 16 | - mounted: function() { | |
| 17 | - const that = this; | |
| 18 | - | |
| 19 | - setTimeout(() => { | |
| 20 | - // 模拟点击【应用】菜单 | |
| 21 | - // that.$refs["iframe"].contentWindow.document.getElementsByClassName('navbar-item')[2].click(); // TODO 暂时去掉,存在跨域问题 | |
| 22 | - // 取消加载中 | |
| 23 | - this.loading = false; | |
| 24 | - }, 230); | |
| 25 | - | |
| 26 | - // 大小变化的监听 | |
| 27 | - window.onresize = function temp() { | |
| 28 | - that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 29 | - }; | |
| 30 | - } | |
| 31 | 14 | }; |
| 32 | 15 | </script> | ... | ... |
yudao-ui-admin/src/views/infra/skywalking/index.vue
| 1 | 1 | <template> |
| 2 | - <div v-loading="loading" :style="'height:'+ height"> | |
| 3 | - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 4 | - </div> | |
| 2 | + <i-frame :src="url" /> | |
| 5 | 3 | </template> |
| 6 | 4 | <script> |
| 5 | +import iFrame from "@/components/iFrame/index"; | |
| 7 | 6 | export default { |
| 8 | - name: "SkyWalking", | |
| 7 | + name: "Druid", | |
| 8 | + components: { iFrame }, | |
| 9 | 9 | data() { |
| 10 | 10 | return { |
| 11 | - src: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿,后续改成配置读取 | |
| 12 | - height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 13 | - loading: true | |
| 11 | + url: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿,后续改成配置读取 | |
| 14 | 12 | }; |
| 15 | 13 | }, |
| 16 | - mounted: function() { | |
| 17 | - setTimeout(() => { | |
| 18 | - this.loading = false; | |
| 19 | - }, 230); | |
| 20 | - const that = this; | |
| 21 | - window.onresize = function temp() { | |
| 22 | - that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 23 | - }; | |
| 24 | - } | |
| 25 | 14 | }; |
| 26 | 15 | </script> | ... | ... |
yudao-ui-admin/src/views/infra/skywalking/log.vue
| 1 | 1 | <template> |
| 2 | - <div v-loading="loading" :style="'height:'+ height"> | |
| 3 | - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 4 | - </div> | |
| 2 | + <i-frame :src="url" /> | |
| 5 | 3 | </template> |
| 6 | 4 | <script> |
| 5 | +import iFrame from "@/components/iFrame/index"; | |
| 7 | 6 | export default { |
| 8 | - name: "SkyWalking-Log", | |
| 7 | + name: "Druid", | |
| 8 | + components: { iFrame }, | |
| 9 | 9 | data() { |
| 10 | 10 | return { |
| 11 | - src: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿,后续改成配置读取 | |
| 12 | - height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 13 | - loading: true | |
| 11 | + url: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿,后续改成配置读取 | |
| 14 | 12 | }; |
| 15 | 13 | }, |
| 16 | - mounted: function() { | |
| 17 | - setTimeout(() => { | |
| 18 | - this.loading = false; | |
| 19 | - }, 230); | |
| 20 | - const that = this; | |
| 21 | - window.onresize = function temp() { | |
| 22 | - that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 23 | - }; | |
| 24 | - } | |
| 25 | 14 | }; |
| 26 | 15 | </script> | ... | ... |
yudao-ui-admin/src/views/tool/dbDoc/index.vue
| ... | ... | @@ -10,15 +10,17 @@ |
| 10 | 10 | |
| 11 | 11 | <!-- 展示文档 --> |
| 12 | 12 | <div v-loading="loading" :style="'height:'+ height"> |
| 13 | - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 13 | + <i-frame :src="src" /> | |
| 14 | 14 | </div> |
| 15 | 15 | </div> |
| 16 | 16 | </template> |
| 17 | 17 | <script> |
| 18 | 18 | import { exportHtml, exportWord, exportMarkdown} from "@/api/tool/dbDoc"; |
| 19 | +import iFrame from "@/components/iFrame/index"; | |
| 19 | 20 | |
| 20 | 21 | export default { |
| 21 | 22 | name: "DBDoc", |
| 23 | + components: { iFrame }, | |
| 22 | 24 | data() { |
| 23 | 25 | return { |
| 24 | 26 | height: document.documentElement.clientHeight - 94.5 + "px;", | ... | ... |
yudao-ui-admin/src/views/tool/swagger/index.vue
| 1 | 1 | <template> |
| 2 | - <div v-loading="loading" :style="'height:'+ height"> | |
| 3 | - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> | |
| 4 | - </div> | |
| 2 | + <i-frame :src="url" /> | |
| 5 | 3 | </template> |
| 6 | 4 | <script> |
| 5 | +import iFrame from "@/components/iFrame/index"; | |
| 7 | 6 | export default { |
| 8 | - name: "Swagger", | |
| 7 | + name: "Druid", | |
| 8 | + components: { iFrame }, | |
| 9 | 9 | data() { |
| 10 | 10 | return { |
| 11 | - src: process.env.VUE_APP_BASE_API + "/doc.html", | |
| 12 | - height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 13 | - loading: true | |
| 11 | + url: process.env.VUE_APP_BASE_API + "/doc.html" | |
| 14 | 12 | }; |
| 15 | 13 | }, |
| 16 | - mounted: function() { | |
| 17 | - setTimeout(() => { | |
| 18 | - this.loading = false; | |
| 19 | - }, 230); | |
| 20 | - const that = this; | |
| 21 | - window.onresize = function temp() { | |
| 22 | - that.height = document.documentElement.clientHeight - 94.5 + "px;"; | |
| 23 | - }; | |
| 24 | - } | |
| 25 | 14 | }; |
| 26 | 15 | </script> | ... | ... |
更新日志.md
| ... | ... | @@ -18,7 +18,8 @@ |
| 18 | 18 | |
| 19 | 19 | ### ⚠️ Warning |
| 20 | 20 | |
| 21 | -TODO | |
| 21 | +* 修复各种多 Maven Module 重构带来的 Bug,感谢大量群友的 PR 支持! | |
| 22 | +* 跟进 ruoyi-vue 3.4.0、3.5.0 版本,感谢这么优秀的开源项目! | |
| 22 | 23 | |
| 23 | 24 | ### 📈 Statistic |
| 24 | 25 | |
| ... | ... | @@ -34,7 +35,7 @@ TODO |
| 34 | 35 | * 【新增】前端的表格右侧工具栏组件支持显隐列,具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5) |
| 35 | 36 | * 【新增】前端的菜单导航显示风格 TopNav(false 为 左侧导航菜单,true 为顶部导航菜单),支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e) |
| 36 | 37 | * 【新增】前端的网页标题支持根据选择的菜单,动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c) |
| 37 | -* 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本,感谢这么优秀的开源项目! | |
| 38 | +* 【新增】前端的 iframe 组件,方便内嵌网页 [commit]() | |
| 38 | 39 | |
| 39 | 40 | ### 🐞 Bug Fixes |
| 40 | 41 | ... | ... |