diff --git a/ruoyi-ui/src/components/iFrame/index.vue b/ruoyi-ui/src/components/iFrame/index.vue
new file mode 100644
index 000000000..4b85f3653
--- /dev/null
+++ b/ruoyi-ui/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>
diff --git a/ruoyi-ui/src/views/monitor/druid/index.vue b/ruoyi-ui/src/views/monitor/druid/index.vue
index fcfa9463b..ef915d9e7 100644
--- a/ruoyi-ui/src/views/monitor/druid/index.vue
+++ b/ruoyi-ui/src/views/monitor/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/login.html",
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: process.env.VUE_APP_BASE_API + "/druid/login.html"
     };
   },
-  mounted: function() {
-    setTimeout(() => {
-      this.loading = false;
-    }, 230);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
 };
 </script>
diff --git a/ruoyi-ui/src/views/tool/swagger/index.vue b/ruoyi-ui/src/views/tool/swagger/index.vue
index 8db31808e..750189115 100644
--- a/ruoyi-ui/src/views/tool/swagger/index.vue
+++ b/ruoyi-ui/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",
+  components: { iFrame },
   data() {
     return {
-      src: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html",
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true
+      url: process.env.VUE_APP_BASE_API + "/swagger-ui/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>