From 5c130cfda68f9f28709ec7d7f792f27df62c6193 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Thu, 17 Jun 2021 20:19:31 +0800
Subject: [PATCH] 封装iframe组件
---
ruoyi-ui/src/views/monitor/druid/index.vue | 19 ++++---------------
ruoyi-ui/src/components/iFrame/index.vue | 36 ++++++++++++++++++++++++++++++++++++
ruoyi-ui/src/layout/components/Sidebar/Logo.vue | 4 ++--
3 files changed, 42 insertions(+), 17 deletions(-)
diff --git a/ruoyi-ui/src/components/iFrame/index.vue b/ruoyi-ui/src/components/iFrame/index.vue
new file mode 100644
index 0000000..426857f
--- /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/layout/components/Sidebar/Logo.vue b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
index afe5fcd..f3bf5d5 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
@@ -2,11 +2,11 @@
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
- <img v-if="logo" :src="logo" class="sidebar-logo">
+ <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
- <img v-if="logo" :src="logo" class="sidebar-logo">
+ <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>
</router-link>
</transition>
diff --git a/ruoyi-ui/src/views/monitor/druid/index.vue b/ruoyi-ui/src/views/monitor/druid/index.vue
index fcfa946..ef915d9 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>
--
Gitblit v1.9.3