封装iframe组件

RuoYi

2021-06-17 3f05ed6ffa5428f44d8ee89233a21561c7e3be8f

封装iframe组件

 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>


 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>


 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>