封装iframe组件

RuoYi

2021-06-17 5c130cfda68f9f28709ec7d7f792f27df62c6193

封装iframe组件

 ruoyi-ui/src/components/iFrame/index.vue

New file
@@ -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>

 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>


 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>