mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 09:11:52 +08:00
v3.6.0 封装iframe组件
This commit is contained in:
YunaiV
parent
833ac54a2f
commit
4a8129bffa
36
yudao-ui-admin/src/components/iFrame/index.vue
Normal file
36
yudao-ui-admin/src/components/iFrame/index.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;",
|
||||
|
||||
@ -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>
|
||||
|
||||
5
更新日志.md
5
更新日志.md
@ -18,7 +18,8 @@
|
||||
|
||||
### ⚠️ Warning
|
||||
|
||||
TODO
|
||||
* 修复各种多 Maven Module 重构带来的 Bug，感谢大量群友的 PR 支持！
|
||||
* 跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
|
||||
|
||||
### 📈 Statistic
|
||||
|
||||
@ -34,7 +35,7 @@ TODO
|
||||
* 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
|
||||
* 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
|
||||
* 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
|
||||
* 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
|
||||
* 【新增】前端的 iframe 组件，方便内嵌网页 [commit]()
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user