v3.6.0 封装iframe组件

yudao-ui-admin/src/components/iFrame/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe
+      :src="src"
+      frameborder="no"
+      style="width: 100%; height: 100%"
+      scrolling="auto"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+  },
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 94.5 + "px;",
+      loading: true,
+      url: this.src
+    };
+  },
+  mounted: function () {
+    setTimeout(() => {
+      this.loading = false;
+    }, 300);
+    const that = this;
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 94.5 + "px;";
+    };
+  }
+};
+</script>

yudao-ui-admin/src/views/infra/druid/index.vue

@@ -1,26 +1,15 @@
 <template>
-  <div v-loading="loading" :style="'height:'+ height">
-    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-  </div>
+  <i-frame :src="url" />
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 export default {
   name: "Druid",
+  components: { iFrame },
   data() {
     return {
-      src: process.env.VUE_APP_BASE_API + "/druid/index.html",
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: process.env.VUE_APP_BASE_API + "/druid/index.html"
     };
   },
-  mounted: function() {
-    setTimeout(() => {
-      this.loading = false;
-    }, 230);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>

yudao-ui-admin/src/views/infra/server/index.vue

@@ -1,32 +1,15 @@
 <template>
-  <div v-loading="loading" :style="'height:'+ height">
-    <iframe ref="iframe" :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-  </div>
+  <i-frame :src="url" />
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 export default {
-  name: "Server",
+  name: "Druid",
+  components: { iFrame },
   data() {
     return {
-      src: process.env.VUE_APP_BASE_API + "/admin",
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: process.env.VUE_APP_BASE_API + "/admin"
     };
   },
-  mounted: function() {
-    const that = this;
-
-    setTimeout(() => {
-      // 模拟点击【应用】菜单
-      // that.$refs["iframe"].contentWindow.document.getElementsByClassName('navbar-item')[2].click(); // TODO 暂时去掉，存在跨域问题
-      // 取消加载中
-      this.loading = false;
-    }, 230);
-
-    // 大小变化的监听
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>

yudao-ui-admin/src/views/infra/skywalking/index.vue

@@ -1,26 +1,15 @@
 <template>
-  <div v-loading="loading" :style="'height:'+ height">
-    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-  </div>
+  <i-frame :src="url" />
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 export default {
-  name: "SkyWalking",
+  name: "Druid",
+  components: { iFrame },
   data() {
     return {
-      src: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿，后续改成配置读取
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿，后续改成配置读取
     };
   },
-  mounted: function() {
-    setTimeout(() => {
-      this.loading = false;
-    }, 230);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>

yudao-ui-admin/src/views/infra/skywalking/log.vue

@@ -1,26 +1,15 @@
 <template>
-  <div v-loading="loading" :style="'height:'+ height">
-    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-  </div>
+  <i-frame :src="url" />
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 export default {
-  name: "SkyWalking-Log",
+  name: "Druid",
+  components: { iFrame },
   data() {
     return {
-      src: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿，后续改成配置读取
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿，后续改成配置读取
     };
   },
-  mounted: function() {
-    setTimeout(() => {
-      this.loading = false;
-    }, 230);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>

yudao-ui-admin/src/views/tool/dbDoc/index.vue

@@ -10,15 +10,17 @@
 
     <!-- 展示文档 -->
     <div v-loading="loading" :style="'height:'+ height">
-      <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
+      <i-frame :src="src" />
     </div>
   </div>
 </template>
 <script>
 import { exportHtml, exportWord, exportMarkdown} from "@/api/tool/dbDoc";
+import iFrame from "@/components/iFrame/index";
 
 export default {
   name: "DBDoc",
+  components: { iFrame },
   data() {
     return {
       height: document.documentElement.clientHeight - 94.5 + "px;",

yudao-ui-admin/src/views/tool/swagger/index.vue

@@ -1,26 +1,15 @@
 <template>
-  <div v-loading="loading" :style="'height:'+ height">
-    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
-  </div>
+  <i-frame :src="url" />
 </template>
 <script>
+import iFrame from "@/components/iFrame/index";
 export default {
-  name: "Swagger",
+  name: "Druid",
+  components: { iFrame },
   data() {
     return {
-      src: process.env.VUE_APP_BASE_API + "/doc.html",
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: process.env.VUE_APP_BASE_API + "/doc.html"
     };
   },
-  mounted: function() {
-    setTimeout(() => {
-      this.loading = false;
-    }, 230);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>

更新日志.md

@@ -18,7 +18,8 @@
 
 ### ⚠️ Warning
 
-TODO
+* 修复各种多 Maven Module 重构带来的 Bug，感谢大量群友的 PR 支持！
+* 跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
 
 ### 📈 Statistic
 
@@ -34,7 +35,7 @@ TODO
 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
 * 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
 * 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
-* 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
+* 【新增】前端的 iframe 组件，方便内嵌网页 [commit]()
 
 ### 🐞 Bug Fixes