v3.6.0 封装iframe组件

This commit is contained in:
YunaiV
2022-02-15 22:24:48 +08:00
parent 833ac54a2f
commit 4a8129bffa
8 changed files with 66 additions and 88 deletions

View 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>

View File

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

View File

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

View File

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

View File

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

View File

@ -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;",

View File

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